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近 几 年 大 前 端 技 术 飞 速 发 展 ，2015 年 Facebook 推 出 React Native 以 
来 ，Native 与 HTML 5 之 间 的 界线 已 变 得 越 来 越 模 糊 ， 而 小 程序 的 强势 
来 缆 更 是 推动 这 类 技术 在 实际 商业 场景 中 的 应 用 。 本 书 将 带领 读者 快速 
入 门 ， 掌 握 小 程序 开发 技巧 ， 一 起 加 入 小 程序 研发 与 探讨 中 。 


一 一 王楠 ， 百 上 度 高 级 经 理 








小 程序 是 非常 棒 的 一 天 产品 ， 它 将 路 平台 研发 技术 与 微 信 业务 进 
完美 的 融合 ， 让 开发 者 在 微 信 环境 中 轻松 开发 出 媲美 原生 体验 的 应 用 。 
大 浪 获 来 时 ， 音 立 潮 头 的 永远 是 认 准 风口 的 少数 人 。 





一 一 刘 通 ， 阿 里 技术 专家 


移动 端 和 前 端 技 术 体 系 的 融合 已 成 为 未 来 大 趋势 ， 小 程序 的 横 空 出 

世 无 疑 对 这 类 技术 在 丙 业 上 的 应 用 起 到 催化 剂 作 用 。 本 书 在 第 一 时 间 给 

出 小 程序 实践 思路 ， 让 初学 者 能 快速 入 门 ， 推 荐 大 家 仔细 阅读 ， 认 真实 
践 。 

一 一 王 羊 ， 阿 里 技术 专家 


小 程序 是 可 以 轻松 使 用 的 路 平 全 技术， 用 炙手可热 的 前 端 技能 开发 


出 接近 原生 性 能 的 应 用 。 从 此 ， 你 只 需要 专心 构建 功能 或 者 服务 ， 无 需 
开发 App， 就 可 以 令 体验 深入 人 心 。 通 过 作者 用 心 写 下 的 这 本 书 ， 加 入 
到 连接 人 和 微 信 的 狂欢 中 来 吧 ! 





一 一 陶 钱 ， 腾 讯 高 级 前 端 工程 师 


不 输 原 生 的 用 户 体验 ， 轻 松 的 开发 者 接 入 方式 ， 更 好 的 应 用 平台 
一 一 与 React Native 相 比 ， 小 程序 借助 于 微 信 ， 相 信 将 带 来 一 场 应 用 开发 
的 变革 。 现 在 ， 这 本 书 将 带 你 参与 到 这 场 变革 中 ， 赶 快 加 入 吧 ! 


一 一 杨帆 ， 多 点 总 监 

小 程序 是 拉 术 驱动 业务 的 典范 ， 它 利用 类 似 React Native、Weex 等 

大 前 端 泻 染 技 术 ， 完 美 解决 了 开发 者 业务 接 入 的 体验 问题 ， 这 不 禁 让 每 

一 位 技术 从 业者 感到 兴奋 、 自 豪 。 本 书 第 一 时 间 给 予 最 佳 实践 案例 及 学 
习 思 路 ， 定 能 让 读者 受益 菲 浅 。 

一 一 刘 鹏 ， 京 东 高 级 工程 师 


能 在 第 一 时 间 看 到 好 友 的 书 ， 感 觉 是 如 此 的 杀 切 ， 作 为 一 个 互联 网 
老兵 ， 能 感到 作者 这 么 多 年 来 在 前 问 技 术 领 域 的 坚持 与 执着 。 本 书 内 容 
易 刷 ， 有 前 并 基础 的 同学 能 很 快 入 门 ， 希望 能 对 小 程序 感 兴趣 的 开 
发 者 种 来 一 些 帮 助 。 


一 一 李 是 ，U 家 工厂 CEO 


序 一 


2016 年 9 月 ， 微 信 刚 一 推出 小 程序 ， 行 业内 便 充 满 了 微 信 对 于 App 
生态 的 各 种 猜想 。 媲 美 Native App 上 原生 体验 ， 基 于 微 信 强 大 流量 入 口 
和 生态 环境 ， 比 起 之 前 推出 的 轻 应 用 、 直 达 写 等 ， 小 程序 的 未 来 仍然 充 
满 了 无 限 的 想象 力 。 小 程序 的 及 布 ， 对 App 开 及 技术 和 前 端 H5 拉 术 的 应 
用 会 产生 重要 的 影响 ， 尤 其 是 对 大 多 数 创业 公司 而 言 ， 小 程序 会 让 研发 
成 本 更 低 ， 开 发 效率 更 高 ， 产 品 达 代 更 快 ， 流 量 获 取 更 容易 。 因 此 随 着 
小 程序 的 不 断 成 熟 ， 对 于 未 来 业内 产品 形态 、 流 量 重 构 可 能 会 掀起 不 小 
的 波浪 ， 古 对 新 领域 进行 的 大 胆 和 尝试。 








本 书 作者 人 李 骏 作为 多 点 生活 的 资深 前 端 架构 师 ， 曾 就 职 于 阿里 、 腾 
讯 等 知名 互联 网 公司 ， 具 有 顶尖 的 前 端 拉 术 能 力 和 丰富 的 实战 经 验 ， 在 
第 一 时 间 便 投入 到 微 信 小 程序 的 实践 中 。 本 书 可 分 为 3 部 分 ， 第 一 部 分 
作为 基础 音节， 介绍 了 第 一 个 小 程序 的 搭建 流程 ， 让 大 家 能 快速 上 手 ; 
同时 对 小 程序 框架 原理 进行 了 详细 介绍 ， 为 后 面 学 习 组 件 、API 打 下 基 
础 。 第 二 部 分 对 小 程序 组 件 、API 进 行 介绍 ， 对 组 件 、API 的 使 用 、 注 
意 事 项 进行 详细 讲解 ， 并 给 出 示例 代码 。 最 后 一 部 分 精 选 5 个 由 浅 入 深 
的 案例 ， 对 小 程序 研发 进行 实战 讲解 ， 涵 瘟 了 实际 项 目 中 可 能 涉及 的 拉 
术 方 案 和 使 用 方法 ， 有 具备 很 强 的 实战 意义 。 在 这 本 书 中 ， 包 含 了 作者 在 
电 商 领域 多 年 的 前 端 经 验 总 结 和 对 当前 主流 架构 的 思考 ， 硕 望 读 者 们 可 











以 从 中 获取 到 上 自己 想 要 的 “干货 ”。 


杨 册 ， 多 点 生活 技术 VP 


2017 年 1 月 于 北京 


邦 二 


微 信 小 程序 如 约 而 至 ， 在 继 服 务 号 、 订 阅 号 、 企 业 号 之 后 微 信 公众 
平台 再 一 次 做 出 了 大 胆 尝 试 。 相 对 于 技术 创新 ， 产 品 色彩 和 利益 驱动 更 
浓厚 。 在 当今 互联 网 时 代 ， 信 息 流 动 越 来 越 封闭 ， 每 个 公司 部 想 让 信 

量 只 进 不 出 ， 尺 量 形成 闭环 ， 基 于 封闭 的 信息 努力 寻找 一 条 便利 
之 路 。 基 于 这 个 逻辑 、 依 托 微 信 庞 大 的 用 户 量 和 超 强 的 用 户 粘 性 ， 微 信 
将 移动 端 路 平 合 技术 与 微 信 App 进 行 深度 集合 ， 提 高 体验 的 同时 提高 
发 效率 。 而 由 于 小 程序 只 能 在 微 信 中 打开 、 分 享 ， 这 使 得 小 程序 在 技术 
层面 和 丙 业 层面 都 形成 展 好 的 财 环 ， 大 大 提升 了 微 信 的 竞 争 力 和 抢占 流 
量 入 口 的 能 力 。 











小 程序 在 本 质 上 与 React Native、Weex 做 的 事 大 同 小 异 ， 不 同 的 
是 ， 小 程序 并 不 是 将 WXML 完 全 原生 化 ， 现 阶段 仅仅 是 部 分 原生 化 ， 大 
部 分 泻 染 工作 任 由 WebView 完 成 ， 比 如 地 图 、textarea 等 组 件 的 优化 ， 
可 以 说 这 种 方式 利用 最 小 的 投入 显著 提高 了 小 程序 的 可 用 性 。 通 过 高 度 
抽象 的 WXML 和 WXSS， 可 以 从 技术 上 通过 限定 一 些 Web 技 术 子 集 ， 从 
而 保障 小 程序 的 性 能 与 体验 ， 而 之 后 小 程序 团队 可 在 不 影响 开发 者 源码 
的 情况 下 ， 随 时 通过 升级 Runtime 与 组 件 、API 不 断 优 化 小 程序 性 能 与 体 
验 ， 甚 至 完全 演变 为 全 原生 化 泻 染 。 这 种 设计 是 一 种 职责 上 的 划分 ， 让 
开发 者 更 关注 业务 ， 小 程序 团队 则 负责 解决 性 能 及 底层 问题 ， 最 快速 地 

















形成 一 套 微 信和 内 的 App 生 态 。 


小 程序 刚 发 布 不 入 ， 本 书 作者 从 实践 角度 分 析 小 程序 研发 技术 并 给 
出 实践 案例 ， 让 大 家 在 最 短 时 间 内 掌握 小 程序 研发 技术 ， 玫 助 大 家 抢占 
入 口中 的 入 口 。 


韩 笑 跃 ， 京 东 商城 技术 总 监 


2017 年 1 月 于 北京 
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用 二 





目 2016 年 9 月 21 日 微 信 小 程序 公布 以 来 ， 微 信 技 术 群 中 关于 小 程序 
的 讨论 惑 没 间 断 过 ， 这 是 又 一 次 创业 的 好 机 会 ， 尤 其 是 对 中 小 企业 扩大 
网 络 影响 力 很 有 利 。 我 们 在 抓紧 时 间 学 习 小 程序 的 过 程 中 ， 总 结 并 实践 
了 小 程序 的 功能 ， 并 希望 通过 这 本 书 传 达 给 广大 的 读者 。 我 们 在 编写 过 
程 中 正 临 电 丙 行业 中 最 忙 的 几 个 月 ， 双 11、 双 12、 和 圣诞 节 、 元 旦 节 等 需 
求 已 经 堆 琶 如 山 ， 我 和 边 思 和 白天 处 理 公 司 需求 ， 晚 上 编写 书籍 ， 几 乎 没 
有 周末 ， 这 样 坚 持 了 几 个 月 终于 完成 本 书 ， 直 至 交 稳 时 才 如 释 重 负 。 











小 程序 刚 发 布 不 入 ， 很 多 功能 都 还 在 不 断 更 新 中 ， 本 书 内 容 在 官方 
文档 基础 上 进行 补充 说 明 ， 并 给 出 实践 案例 ， 演 试 给 出 现 阶段 尽 可 能 完 
善 的 开发 模式 ， 适 合 小 程序 初学 者 入 门 。 在 小 程序 的 学 习 过 程 中 ， 我 们 
做 过 很 多 尝试 ， 这 里 我 们 仅仅 提出 了 自己 的 一 些 实现 方案 和 观点 供 大 家 
参考 。 小 程序 整体 推动 还 需要 更 多 开发 者 参与 ， 小 程序 还 未 正式 公布 
前 ， 便 有 很 多 公司 及 个 人 针对 小 程序 研发 过 程 中 的 痛 扣 推出 了 各 类 三 方 
框架 ,希望 阅 读本 书后 ， 大 家 也 能 提出 自己 的 想法 ， 积 极 参 与 小 程序 相 
关 话 题 讨 论 ， 推 动 小 程序 研发 方案 优化 与 普及 。 




















本 书 内 容 和 组 织 结构 


本 书 内 容 大 致 可 分 为 三 部 分 。 


第 一 部 分 为 基础 部 分 ， 共 3 章 ， 主 要 介绍 小 程序 开发 的 基础 知识 。 





介绍 微 信 小 程序 环境 搭建 、 运 行 第 一 个 小 程序 demo。 


第 2 章 介 绍 小 程序 核心 知识 ， 包 括 整 体 框架 运行 原理 、 规 则 ， 每 个 
文件 的 作用 ， 以 及 WXML 与 WXSS。 


第 3 章 介 绍 CSS 布 局 基础 ， 讲 解 了 盒子 模型 、 浮 动 、 定 位 以 及 Flex 布 


第 二 部 分 为 组 件 和 API， 共 2 章 ， 主 要 讲解 小 程序 组 件 、API 相 关 知 


第 4 章 介 绍 小 程序 组 件 相 关 知 识 ， 主 要 内 容 包 括 视 图 容 露 、 基 础 组 
件 、 表 单 组 件 、 导 航 、 媒 体 组 件 、 地 图 、 男 布 等 。 


第 5 章 介绍 小 程序 API 相 关 知 识 ， 主 要 内 容 包括 网 络 、 媒 体 、 文 件 、 
数据 缓存 、 位 置 、 设 备 、 界 面 、 开 放 接 口 等 。 


第 三 部 分 为 案例 实践 ， 共 5 章 ， 通 过 实际 案例 介绍 如 何 开发 小 程序 
应 用 ， 包 括 一 些 思路 和 框 染 ， 以 及 部 分 代码 和 实现 技巧 。 


第 6 间 介 绍 如 何 开 及 豆瓣 电影 小 程序 ， 主 要 讲解 一 个 最 简单 小 程序 
的 代码 结构 。 


第 7 章 介 绍 如 何 开 发 萄 考 小 程序 ， 主 要 讲解 如 何 利 用 第 三 方 API 创 建 


小 程序 引用 。 
第 8 章 介 绍 如何 开 发 打 质 小 程序 ， 主 要 讲解 小 程序 文 付 流程 。 
第 9 章 介 绍 如 何 开 肥 日程 表 小 程序 。 


第 10 半 介绍 如 何 开 发 多 扣 商 城 ， 主 要 讲解 如 何 染 构 一 个 复杂 小 程序 
项 目 。 


本 书包 含 的 所 有 案例 代码 可 以 到 https://github.com/wxapp-book 下 
载 。 本 书 创作 时 间 较 短 ， 如 有 下 漏 ， 奶 请 各 位 读者 径 正 。 
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第 1 章 ，” 初 识 小 程序 


微 信 小 程序 自 2016 年 9 月 21 日 内 测 以 来 ， 就 引起 广泛 关注 ， 越 来 越 
多 的 开发 者 开始 研究 如 何 使 用 它 ， 在 业界 刊 起 了 一 阵 不 小 的 飓风 。 小 程 
序 不 仅 在 商业 上 具备 很 大 潜力 ， 同 时 在 技术 上 解决 了 一 套 代 码 多 端 运 行 
和 动态 发 版 的 两 大 痛 点 ， 用 户 在 微 信 中 扫 一 扫 或 搜 一 下 即 可 打开 具备 原 
生体 验 的 应 用 ， 这 给 开发 者 带 来 了 很 大 的 想象 空间 。 小 程序 还 在 测试 阶 
段 就 有 大 量 开发 者 尝试 为 其 开发 各 种 框架 ， 其 中 腾讯 云 还 开发 了 一 套 微 
信人 小 程序 解决 方案 (https:Wwww.qcloud.comy/solutiomrla.html ) ， 由 此 可 
见 小 程序 在 业界 的 影响 力 非 同 小 可 。 本 章 将 介绍 小 程序 的 接 入 流程 ， 并 
展示 第 一 个 小 程序 的 开发 过 程 ， 使 读者 快速 入 门 ， 简 单 体验 小 程序 的 开 























按 官方 定义 来 讲 ， 小 程序 是 一 种 不 需要 下 载 安 装 即 可 使 用 的 应 用 ， 
它 实 现 了 应 用 “触手 可 及 ”的 梦想 ， 用 户 扫 一 扫 或 者 搜 一 下 即 可 打开 应 
用 。 也 体现 了 “用 完 即 走 ” 的 理念 ， 用 户 不 用 担心 是 否 安装 太 多 应 用 的 问 
题 。 应 用 将 无 处 不 在 ， 随 时 可 用 ， 但 又 无 需 安装 卸载 。 


从 技术 角度 来 讲 ， 小 程序 采用 了 类 似 React Native 和 Weex 一 样 的 解 
析 技 术 ， 开 发 者 可 编写 一 套 代码 在 多 端 运行 (Android 微 信 、iOS 微 信和 
浏览 器 容器 ) ， 同 时 相 比 公众 号 H5 应 用 ， 小 程序 具备 更 好 的 原生 体 
验 。 严 格 来 讲 ， 小 程序 也 是 需要 下 载 和 安装 的 ， 只 是 由 于 技术 实现 方案 
以 及 官方 规定 小 程序 包容 量 不 得 超过 1M， 使 得 下 载 、 安 装 〈 部 署 ) 过 
程 特别 快 ， 用 户 在 感官 上 察觉 不 到 它 在 安装 而 已 。 为 了 达到 用 完 即 走 、 
快速 开发 的 目的 ， 小 程序 提供 了 一 套 完整 的 开发 框架 、 丰 富 的 组 件 和 
API， 相 比 React Native 和 Weex， 小 程序 将 技术 与 商业 进行 了 完美 的 结 


人 
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1.2 ” 接 入 流程 


小 程序 与 订阅 号 、 服 务 号 、 企 业 号 是 并 行 的 体系 ， 具 有 独立 的 注 
册 、 发 布 流程 。 开 发 小 程序 首先 前 需要 在 微 信 公众 平台 上 注册 小 程序 ， 
完善 基本 信息 ， 然 后 下 载 开发 者 工具 进行 编码 ， 最 后 通过 开发 者 工具 提 
交代 码 ， 官 方 审核 通过 后 便 可 发 布 。 要 注意 的 是 ， 现 阶段 每 个 机 构 账 号 
只 允许 注册 最 多 50 个 小 程序 ， 每 个 小 程序 一 年 需要 缴纳 300 元 ， 所 有 小 
程序 都 需要 绑 定 一 个 电子 邮箱 ， 一 个 手机 号 码 最 多 只 能 绑 定 5 个 小 程 
序 。 











1.2.1 注册 小 程序 帐号 


注册 小 程序 帐号 只 需 如 下 四 步 : 


1) 在 微 信 公众 平台 官网 首页 (mp.weixin.qq.com ) 点击 右上 角 
的 “立即 注册 ”按钮 ， 如 图 1-1 所 示 。 
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系统 公告 微 信 公 众 平台 关于 处 理 “二 元 期 权 ” 类 信息 的 ...。 中 微 信 公 众 平台 小 程序 开放 公测 中 查看 更 多 




















图 1-1 注册 小 程序 


2) 选择 注册 的 帐号 类 型 ， 选 择 “ 小 程序 ?””， 如 图 1-2 所 示 。 


3) 进入 帐号 信息 页 面 ， 填 写 未 注册 过 公共 平台 、 开 放 平 台 、 企 业 
号 、 未 绑 定 个 人 号 的 邮箱 ， 这 个 邮箱 将 作为 以 后 登录 小 程序 后 台 的 帐 
号 ， 如 图 1-3 所 示 。 





所 他 马 |8https//mp.weixin.qqcom/cgi-bin/registermidpage?action=index&lang=zh_CN 





洪 应 用 目 dmall 上 前 庄 框 巡 加 技术 文章 站 开发 表 要 门 绘画 站 吉他 上 奇 汞 网 站 站 跨 平台 是 书生 日 去 化 | 


Oms 


具有 信息 发 布 与 传播 的 能 力 
适合 个 人 及 媒体 注册 


© 小 程序 


具有 出 色 的 体验 ， 可 以 被 便捷 地 获取 与 传播 具有 实现 企业 内 部 沟通 与 内 部 协同 管理 的 能 力 
适合 有 服务 内 容 的 企业 和 组 织 注册 适合 企业 客户 注册 





图 1-2 ”选择 帐号 类 型 
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人 帐号 信息 @) 邮箱 激活 人 信息 登记 


每 个 邮箱 仅 能 申请 一 个 小 程序 已 有 微 信 小 程序 ? 立即 登录 


作为 登录 帐号 ， 请 填写 未 被 微 信 公众 平台 注册 ,未 
被 微 信 开放 平台 注册 ,未 被 个 人 微 信号 绑 定 的 邮箱 


字母 、 数 字 或 者 英文 符号 ， 最 短 8 位 ， 区 分 大 小 写 





图 1-3 ”填写 邮箱 信息 


4) 填写 个 人 帐号 信息 后 ， 会 收 到 一 封 激活 邮件 ， 点 击 激活 链接 ， 
进入 主体 信息 页 面 填写 相关 内 容 ， 即 可 完成 注册 流程 ， 主 体 信息 一 经 所 
交 后 便 不 可 修改 ， 如 图 1-4 所 示 。 
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请 确认 你 的 微 信 公众 帐号 主体 类 型 属于 政府 、 媒 体 、 企 业 、 其 他 组 织 ， 并 请 按照 对 应 的 类 别 进 行 信息 登记 
点 击 查 看 ' 微 信 公 众 平 台 信息 登记 指引 。 








主体 类 型 如 何 选择 主体 类 型 ? 


企业 政府 媒体 其 他 组 织 
企业 包括 : 企业 、 分 支 机 构 、 个 体 工商 户 、 企 业 相关 品 牌 。 


主体 信息 登记 
企业 类 型 


企业 名 称 


需 与 当地 政府 颁发 的 商业 许可 证 书 或 企业 注册 证 上 的 企业 名 称 完全 一 致 ， 信 息 审 核 审 核 成 功 后 ,企业 名 称 
不 可 修改 - 


请 输入 15 位 营业 执照 注册 号 或 18 位 的 统一 社会 信用 代码 


请 先 填写 名 称 


管理 员 信 息 登 记 





图 1-4 完善 主体 信息 


1.2.2 ”开发 环境 准备 


完成 帐户 注册 后 ， 需 要 登录 微 信 公 共 平 台 官 网 (mp.weixin.qq.com 
) ， 根 据 流程 完善 小 程序 信息 ， 如 图 1-5 所 示 。 需 要 注意 的 是 ， 目 前 小 
程序 名 称 一 旦 确定 后 便 不 能 修改 。 
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小 程序 发 布 流程 


step 


1 微 信 认 证 
企业 类 型 请 先 通过 微 信 认 证 完成 主体 真实 性 确认 。 否 则 将 无 法 发 布 小 程序 . 


小 程序 信息 。 ”补充 小 程序 的 基本 信息 ， 如 和 名称、 图 标 、 摘 述 等 


小 程序 开发 与 管理 

开发 工具 下 载 开 发 者 工具 进行 代码 的 开发 和 上 传 

添加 开发 者 。 添加 开发 者 ， 进 行 代码 上 传 

配置 服务 器 在 开发 设置 页 面 坦 看 AppID 和 AppSecret ,配置 服务 器 域名 
帮助 文档 可 以 阅读 入 门 介绍 、 开 发 文档 、 设 计 规 范 和 运营 规范 











图 1-5 ”完善 小 程序 信息 





开发 小 程序 之 前 还 需要 进入 “用 户 身 份 - 开 发 者 ”， 绑 定 开 及 者 ， 如 
图 1-6 所 示 。 只 有 绑 定 的 开发 者 才能 使 用 开发 者 工具 编写 小 程序 ， 
小 程序 最 多 可 以 绑 定 20 个 开发 者 ， 未 认证 的 小 程序 最 多 可 以 绑 定 10 个 开 
发 者 。 
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图 1-6” 绑 定 开 发 者 


应 加 开发 者 后 ， 需 要 要 进入 “设置 -开发 设置 ”， ee 如 图 1- 
7 所 示 。AppID 十 分 重要 ， 只 有 填写 了 AppID 的 项 目 才能 通过 手机 微 信 扫 
码 进行 真 机 测试 。 
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设置 


wn 


开发 者 ID 


AppID( 小 程序 ID) wx688e0bc628edd02e 


AppSecret( 小 程序 密 钥 ) 





图 1-7 获取 AppID 


最 后 便 可 到 首页 下 载 开 发 者 工具 ， 如 图 1-8 所 示 。 小 程序 开发 工具 
主要 用 于 小 程序 调试 、 预 钨 ， 虽 然 自 带 了 代码 编辑 功能 ， 但 还 是 建议 使 
用 目 己 熟悉 的 编辑 器 对 代码 进行 编辑 〈 如 : sublime、atom、brackets 


等 ) 


O 〇 





小 程序 发 布 流程 


step 


1 微 信 认证 
企业 类 型 请 先 通 过 微 信 认证 完成 主体 真实 性 确认 。 否 则 梅 无 法 发 布 小 程序 。 


小 程序 信息 。 ”补充 小 程序 的 基本 信息 ， 如 名 称 、 图 标 、 摘 述 等 


在 开发 设置 页 面 查 看 AppID 和 AppSecret ,配置 服务 器 域名 
可 以 阅读 入 门 介绍 、 开 发 文档 、 设 计 规范 和 运营 规范 


先 提 交代 码 ， 然 后 提交 审核 ， 审 核 通过 后 可 发 布 


图 1-8 下 载 开 及 者 工具 





1.3 ”第 一 个 小 程序 


完成 开发 准备 后 我 们 便 可 以 开始 编写 小 程序 ， 微 信人 小 程序 的 开发 十 
分 简单 ， 大 家 可 以 快速 上 手 。 下 面 我 们 利用 官方 提供 的 dmeo 让 大 家 对 
小 程序 开发 有 初步 认识 。 








1) 打开 微 信 开发 者 工具 。 第 一 次 月 动 需要 扫描 二 维 码 登录 ， 如 图 
1-9 所 示 ， 开 发 权限 配置 参照 上 一 小 市 。 


</> 


微 信 开 发 者 工具 


“ 微 信 web 开 发 者 工具 ” 





图 1-9 ”登录 微 信 开发 者 工具 


2) 登录 后 选择 “添加 项 目 ”。 








3) 在 填写 项 目 信 息 之 前 ， 先 创建 一 个 空 目 录 作 为 项 目 资源 目录 ， 
这 里 我 们 以 E: \weixin\demo 为 例 。 








4) 填写 项 目 信 息 。 如 果 没 有 AppID 可 以 选择 “无 AppID”; 填写 项 目 
名 称 ， 项 目 名 称 在 微 信 开发 者 工具 中 是 唯一 的 ;项目 目录 选择 刚才 创建 
的 空 目 录 ， 这 里 一 定 要 保证 刚才 创建 的 目录 为 空 目 录 ， 这 样 下 面 会 出 

















现 “ 在 当前 目录 中 创建 quick start 项 目 ” 选 项 ， 义 选 这 个 选项 ， 


示 ， 然 后 点 击 “ 添 加 项 目 ” 按 钮 。 


ApplID ”无 ApplD 部 分 功能 受 限 


返回 填写 小 程序 AppID 


项 目 名 称 demo 


项 目 目录 E-\Wweixin\demo 


回 在 当前 目录 中 创建 quick start 项 目 





图 1-10 ”填写 项 目 信 息 


创建 好 后 的 界面 如 图 1-11 所 示 。 


如 图 1-10 所 





设置 ”动作 ”帮助 微 信 开发 者 工具 0.10.101400 一 口 X 


宁 iPhone 4s wifi [RK | Console 
© 时 top 


onLoad 


2 


Hello World 


s |Console 





图 1-11 第 一 个 小 程序 


这 样 我 们 便 成 功 创建 了 第 一 个 小 程序 ， 这 个 demo 是 官方 提供 的 示 
例 ， 第 一 个 页 面 展 示 了 当前 登录 的 用 户 信息 ， 点 击 头像 会 跳 转 到 一 个 记 
录 当 前 小 程序 启动 时 间 的 日 志 页 面 。 为 了 让 大 家 进一步 体验 小 程序 开 
发 ， 我 们 利用 Sublime 或 其 他 编辑 工具 打开 E: \weixindemo 文 件 夹 ， 修 





改 index.wxml， 将 “{{ftmotto}}” 蔡 换 为 “我 的 第 一 个 小 程序 ”，index.wxml 
修改 后 代码 如 下 : 





<!--index.wxml--> 
<view class="container"> 
<view bindtap="bindViewTap" class="userinfo"> 
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size= "ccC 
<text class="userinfo-nickname">{{userInfo.nickName}}</text> 
</view> 
<view class="Uusermotto"> 
<1-- ”修改 这 人 句 代码 ”--> 
<text class="user-motto"> 我 的 第 一 个 小 程序 </text> 
</view> 
</view> 





修改 后 点 击 “ 重 启 ”， 如 图 1-12 所 示 。 


微 信 开 发 者 工具 0.10.101400 ee 


wifi [x | Console 


Hello World 





TT 
: | Console 


图 1-12 ”重启 项 目 


重启 后 ， 登 录 界 面 提示 语 由 原来 的 “Hello World” 变 成 了 “我 的 第 一 
个 小 程序 ”， 如 图 1-13 所 示 。 


设置 ”动作 ”帮助 微 信 开 发 者 工具 0.10.101400 二 


iPhone 4s [RK | Console 


我 的 第 一 个 小 程序 


本 
: | Console 





图 1-13 我 的 第 一 个 小 程序 


填写 了 AppID 的 项 目 可 以 选择 “项 目 - 预览 ”〈 如 网 1-14 所 示 ) ， 扫 
描 二 维 码 在 微 信 中 体验 项 目 。 


微 信 开发 者 工具 0.10.102800 


本 地 开发 目录 。  E:WworkWxapp-book\ 书 籍 \3 第 三 章 布局 demo 


最 新 更 新 时 间 。 ”2016/11/18 上 午 11:27:36, 编译 包 大 小 33 kb 


开启 ES6 转 ES5 
监听 文件 变化 ， 自 动 刷新 开发 者 工具 
门 | 开启 代码 压缩 上 传 





图 1-14 ”预览 小 程序 


至 此 我 们 简单 体验 了 一 个 小 程序 的 创建 过 程 ， 但 对 于 一 个 喜欢 “ 创 
根 问 底 ” 的 学 习 者 来 说 ， 这 个 案例 远 远 不 够 ， 可 能 会 有 很 多 问题 ， 例 
如 : 





小 程序 局 动 入 口 在 哪里 ? 


"index.wxml、index.wxss、index.js 等 文件 是 否 可 以 重新 命名 ?它们 


之 间 的 关系 是 什么 ? 目录 结构 有 怎样 的 规范 ? 


`WXML、WXSS 文 件 是 什么 ? 怎么 感觉 很 像 HTML 和 CSS? 


' 小 程序 开发 中 有 哪些 限制 ? 








大 家 可 以 先 按 自 己 理解 尝试 修改 项 目 中 相关 的 文件 ， 看 看 能 产生 什 
么 效果 ， 把 过 程 中 遇 到 的 问题 记录 下 来 ， 带 着 问题 阅读 后 面 的 章 





1.4 人 小结 





本 章 简 单 介 绍 了 小 程序 开发 流程 ， 让 大 家 对 小 程序 有 体验 式 理解 。 
小 程序 的 学 习 过 程 并 不 难 ， 掌 握 框架 、 组 件 、API 后 可 快速 上 手 ， 技 术 
细 市 问题 我 们 将 在 后 续 章 市 中 进行 详细 讲解 。 本 章 仪 介绍 了 主要 的 流 
程 ， 接 入 过 程 中 磁 到 的 细 市 问题 可 参考 官方 资 


料 : http://mp.weixin.qq.com/debug/wxadoc/introduction 。 





第 2 草 ” 小 程序 开发 核心 





上 一 章 讲 解 了 小 程序 创建 流程 ， 本 间 主 要 为 大 家 讲解 小 程序 框架 及 
核心 内 容 。 小 程序 框架 可 让 开 友 者 在 微 信 中 用 尺 可 能 简单 、 融 效 的 方式 
开发 出 具有 原生 App 体 验 的 服务 ， 这 套 框架 控制 着 小 程序 完整 的 生命 周 
期 ， 负 责 页 面 的 加 载 、 这 染 、 销 毁 等 工作 ， 它 是 小 程序 的 核心 ， 学 习 小 
程序 前 ， 我 们 一 定 要 对 这 套 框 杂 有 深入 的 了 解 。 本 章 主 要 对 小 程序 目录 
结构 、 文 件 类 型 进行 详细 分 析 ， 重 点 介绍 小 程序 视图 层 WXML、 
MXSS， 忱 和 辑 层 JS， 这 些 是 小 程序 开 及 的 核心 内 容 。 本 章 个 别 小 节 内 容 
比较 深 ， 学 习 过 程 中 不 必 过 于 深 完 ， 能 对 框 杂 有 个 整体 认识 即 可 。 











小 程序 框架 将 整个 系统 划分 为 视图 层 和 逻辑 层 ， 视 图 层 是 由 框架 设 
计 的 标签 语言 VXML (WeiXin Markup Language) 和 用 于 描述 WXML 组 
件 样式 的 WXSS (WeiXin Style Sheets) 组 成 ， 它 们 的 关系 就 像 HTML 和 
CSS 的 关系 。WXML 和 WXSS 在 泻 染 时 会 被 框架 解析 为 不 同 端的 本 地 泻 
染 文 件 ， 这 样 保证 一 套 代码 能 在 多 处 运行 ， 并 且 能 最 大 化 地 接近 原生 
App。 泻 染 原 理 和 React Native、Weex 十 分 接近 ， 开 发 过 程 中 我 们 不 必 
深究 WXML 的 泻 染 原理 ， 只 需要 有 个 大 至 了 解 妈 可。 小 程序 逻辑 层 是 一 
套 运行 在 本 地 JavaScript 引 擎 的 JavaScript 代 码 ， 在 此 基础 上 框架 实现 了 
一 套 模块 化 机 制 ， 让 每 个 JS 文件 有 独立 的 作用 域 和 模块 化 能 力 ， 这 套 模 
块 化 机 制 遵循 CommonJS 规 范 ， 熟 悉 NodeJs 的 开发 者 应 该 有 一 定 了 解 。 


小 程序 整体 开发 流程 非常 接近 前 端 HTML+CSS+JavaScript 的 开发 模 
式 ， 与 前 端 开 发 不 同 的 是 ， 在 小 程序 中 没有 DOM 的 概念 ， 在 本 地 的 
JavaScript 引 擎 中 也 没有 window、document 等 对 象 ， 我 们 不 能 想当然 地 
通过 操作 DOM 来 操作 页 面 ， 小 程序 中 的 视图 层 和 逻辑 层 的 交互 是 通过 
数据 绑 定 和 事件 啊 应 实现 的 ， 这 是 一 种 单 向 绑 定 的 机 制 。 这 套 机 制 需要 
首先 将 逻辑 层 和 视图 层 的 数据 和 事件 进行 绑 定 ， 当 需要 修改 页 面 时 ， 逻 
辑 层 只 需要 调用 特定 的 setData 方 法 修改 已 绑 定 的 数据 ， 这 时 框架 会 自动 
触发 WXML 重 新 泻 染 ， 达 到 逻辑 层 对 视图 层 的 控制 ;， 当 框架 接收 到 用 户 











交互 操作 时 ， 会 根据 视图 层 绑 定 的 事件 ， 执 行 馆 辑 层 中 对 应 的 事件 函 
数 ， 达 到 逻辑 层 对 视图 层 的 啊 应 ， 视 图 层 与 逻辑 层 的 关系 如 图 2-1 所 
示 。 这 和 套 机 制 是 小 程序 框 淋 的 工作 诛 理 ， 在 后 续 内 容 中 我 们 将 反复 提 
及 ， 加 深 大 家 对 它 的 理解 。 








视图 层 


用 户 交 互 行为 ,通过 WXML 事件 逻辑 层 调 用 setData() 
绑 定 ， 调 用 逻辑 层 相 关 事件 方法 。 触发 视图 层 泻 染 。 
逻辑 层 


图 2-1 视图 层 与 逻辑 层 关系 


2.2 “徒手 ”创建 小 程序 





为 了 让 开发 者 更 好 地 理解 小 程序 框 染 运行 机 制 ， 接 下 来 将 带领 大 
家 “徒手 ”创建 一 个 结构 最 简单 的 小 程序 ， 这 样 每 个 细 市 都 是 开发 者 自己 
完成 的 ， 这 对 理解 小 程序 框 如 有 很 大 帮助 。 步 又 如 下 : 





1) 创建 项 目 目录 ， 这 里 以 E: \weixinmyproject 为 例 。 





2) 按 图 2-2 所 示 的 目录 结构 创建 文件 : 


3) 打开 app.json， 写 入 以 下 代码 : 





"pages" :; [ 
/* 指定 默认 启动 页 面 地 址 */ 


"mypages/index/index" 


























4) 打开 index.wxml， 写 入 以 下 代码 : 














<view bindtap="countClick"> 我 是 jndex 页 面 ,你 点 击 了 {{count}} 次 </view> 











5) 打开 index.js 文 件 ， 写 入 以 下 代码 : 





Page( { 
data : { 
count : 0 


* 
CountClick : function() { 
this,.setData( { 
count : this.data.count + 1 


} ) 


就 这 么 几 步 ， 一 个 最 简单 的 小 程序 便 拱 建 好 了 ， 项 目 中 仅 包含 一 个 
index 页 面 ， 这 个 目录 结构 是 最 简单 、 最 基础 的 小 程序 结构 。 接 下 来 我 
们 将 它 导 入 开发 者 工具 中 看 看 运行 效果 。 























6) 打开 微 信 开 发 者 工具 ， 填 写 AppId 和 项 目 名 称 ， 点 击 “ 选 择 ” 按 钮 
添加 项 目 ， 项 目 目录 选 择 刚 才 创 建 的 目录 E: \weixinmyproject， 点 
击 “ 添 加 项 目 ” 完 成 添加 ， 如 图 2-3 所 示 : 








myproject 


"(Mypages 


r 古 index 
index.js 
index.json 


< > Index.wxml 
{ } Index.wxss 
app.js 
app.json 
{ } app.wxss 





图 2-2 ”目录 结构 


无 ApplD 部 分 功能 受 限 


反 回 适 与 小 程序 AppiD 


myproject 


E-\weixin\imyproject 





图 2-3 项目 配置 界面 


7) 导入 项 目 后 我 们 便 能 看 到 运行 界面 ， 当 我 们 点 击 文字 时 ， 扩 击 
次 数 也 会 随 之 增加 《如 图 2-4 所 示 ) 。 


这 就 是 最 简单 的 小 程序 ， 所 有 复杂 的 项 目 都 是 围绕 这 个 结构 进行 拓 
展 的 。 当 运行 这 个 项 目 时 ， 框 架 首先 会 解析 配置 文件 app.json， 通 过 
pages 设 置 找到 默认 首页 页 面 mypages/index/index (pages 第 一 个 路 径 默认 


为 首页 ) ， 然 后 加 载 mypage/index 日 录 中 index.wxml、index.wxss、 


index.js、index.json 这 4 个 文件 进行 页 面 泻 染 。 


设置 ”动作 ”帮助 微 信 开发 者 工具 0.10.101400 一 口 X 


iPhone 4 Md Wwifi ” [x Console 


© 于 top 
undefined 


undefined 


技 是 index 页 面 , 你 点 击 了 0 议 





s | Console 





图 2-4 ”myproject 运 行 界面 


在 index.wxml 文 件 中 ， 我 们 简单 使 用 了 <view/> 组 件 ， 页 面 泻 染 时 ， 
框架 将 逻辑 层 中 data 的 count 属 性 与 视图 层 的 count 进 行 了 绑 定 ， 所 以 一 打 
开 页 面 会 显示 点 击 次 数 为 0。 当 点 击 <view/> 时 ， 会 触发 tp 事件 ， 这 时 视 
图 层 根据 <view/> 组 件 bindtap 属 性 值 ， 将 绑 定 的 countClick 事 件 发 送 给 逻 
辑 层 ， 人 逻辑 层 根据 方法 名 找到 对 应 的 事件 处 理 函 数 countClick 并 执行 。 
countClick 函 数 中 ， 我 们 调用 了 setData 方 法 修改 count 值 ， 并 触发 视图 层 
演 染 ， 所 以 页 面 中 的 数字 随 着 点 击 次 数 增加 ， 这 种 视图 层 和 你 辑 层 之 间 











相互 通信 的 机 制 便 是 小 程序 的 数据 绑 定 和 事件 啊 应 系统 。 





在 一 个 完整 的 小 程序 中 ， 文 件 主要 分 为 框架 程序 主体 文件 和 页 面 文 
件 两 大 类 : 





框架 程序 主体 文件 是 系统 级 别 文件 ， 一 个 项 目 只 有 一 份 ， 分 别 是 
app.json、app.js 和 app.wxss， 它 们 分 别 控制 小 程序 整体 配置 、 逻 辑 和 整 
体 样 式 ， 小 程序 局 动 时 只 会 执行 一 次 。 这 3 个 文件 必须 放 在 项 目 根 目 
录 ， 且 文件 名 必须 是 app， 其 中 app.json 和 app.js 是 必须 的 。 


一 个 小 程序 有 一 个 或 多 个 页 面 ， 一 个 页 面 由 .wxml、.wxss、.js 和 
json 四 个 文件 组 成 ， 它 们 分 别 控制 页 面 的 结构 、 样 式 、 逻 辑 和 配置 ， 其 
中 .wxml 文 件 和 .js 文件 是 必须 的 ， 按 照 框 架 规 定 ， 同 一 个 页 面 的 这 4 个 文 
件 必须 具有 相同 的 路 径 和 文件 名 ， 所 以 在 这 个 项 目 中 我 们 将 它们 放置 在 
mypages/index 路 径 下 且 文 件 名 统一 为 index， 其 中 index 目 录 名 可 以 和 页 
面 文件 名 不 一 致 ， 为 了 便于 管理 我 们 尽量 将 页 面目 录 名 和 页 面 文件 名 保 
持 一 致 。 








现在 我 们 对 小 程序 框 絮 有 个 大 致 的 认识 ， 下 面 ， 将 分 别 为 大 家 讲解 
框架 主体 文件 和 框架 页 面 的 特性 及 使 用 方法 。 


2.3 ”框架 主体 文件 





框架 主体 文件 由 app.json、app.js、app.wxss 构 成 ， 这 3 个 文件 必须 放 
置 在 项 目 根 目 录 ， 一 个 小 程序 只 有 一 份 ， 它 们 负责 小 程序 整体 的 配置 : 


.app.json: 小 程序 公共 设置 ， 配 置 小 程序 全 局 设置 。 


“app.js: 小 程序 逻辑 文件 ， 主 要 用 于 注册 小 程序 全 局 实例 ， 编 译 时 
会 和 其 他 页 面 逻 辑 文件 打 包 成 一 份 JavaScript 文 件 。 


app.wxss: 小 程序 公共 样式 表 ， 对 所 有 页 面 的 布局 文件 都 有 效 。 


app.json 和 app.js 是 必须 存在 的 ，app.wxss 不 是 必须 创建 的 ， 可 以 根 
据 项 目 情况 进行 创建 。 接 下 来 我 们 逐个 分 析 每 个 文件 。 





2.3.1 配置 文件 (app.json) 


app.json 是 小 程序 配置 文件 ， 编 写 时 要 严格 遵循 json 的 格式 规范 。 
app.json 在 程序 加 载 时 加 载 ， 负 责 对 小 程序 的 全 局 配置 ， 其 配置 项 有 : 


:pages: 设置 页 面 路 径 ， 必 填 项 。 





-window: 设置 默认 页 面 的 窗口 表现 。 

-tabBar: 设置 tab 的 表现 。 

networkTimeout: 设置 网 络 超时 时 间 。 

-debug: 设置 是 否 开 局 debug 模 式 ， 默 认 关闭 。 


app.json 文 件 内 容 整 体 结构 如 下 : 





























// 页 面 路 径 设 
"pages" 3 []， 
// 默认 页 面 的 窗口 设置 



















































































人 
// 设置 网 络 请 求 API 的 超时 时 间 
"networkTimeout" : {}, 
// 是 否 为 debug 模 式 

"debug" : false 





1.pages 配 置 


pages 负 责 注 册 小 程序 页 面 ， 必 须 填 写 ，value 值 为 一 个 包含 页 面 路 
径 的 数组 ， 用 来 指定 小 程序 由 哪些 页 面 构成 ， 每 一 项 由 页 面 “ 路 径 + 文 件 
名 ”组 成 ， 如 下 所 示 : 








"pages"™" : 
"mypages/index/index", 
"mypages/page2/mypagefilename", 
"otherpages/index/index" 











pages 数 组 中 页 面 路 径 不 需要 填写 文件 后 级 名 ， 泻 染 页 面 时 框架 会 
自动 寻找 路 径 .json，.js，.wxml，.wxss 四 个 文件 进行 整合 ， 如 上 文 配置 
中 “mypages/index/index” 路 径 ， 页 面 加 载 时 框架 会 自动 匹配 寻 
找 “mypages/index/index.json”、“mypages/index/index.js”、“mypages/index 
四 个 文件 ， 路 径 中 的 文件 名 可 以 和 目录 名 不 一 致 ， 但 在 项 目 过 程 中 ， 为 
了 便于 管理 ， 建 议 文件 名 和 目录 名 保持 一 致 。pages 配 置 数组 第 一 项 代 
表 小 程序 的 初始 页 面 。 小 程序 中 增加 、 删 除 页 面 ， 都 需要 对 pages 进 行 
修改 ， 并 且 重 启 项 目 。 





2 .window 配 置 


window 负 责 设置 小 程序 状态 栏 、 导 航 条 、 标 题 、 窗 口 背景 色 等 系 


统 级 样式 。 属 性 有 : 


navigationBarBackgroundColor: 导航 栏 背景 颜色 ， 值 为 
HexColor 十 六 进 制 颜色 值 》， 如 : “#ff83fa”， 默 认 值 为 #000000。 


navigationBarTextStyle: 导航 栏 标题 颜色 ， 仅 文 持 black/white， 默 
认 值 为 white。 


.navigationBarTitleText: 导航 栏 标题 文字 内 容 。 


-backgroundColor: 窗口 背景 色 ， 值 为 HexColor〈 十 六 进 制 颜色 
值 )， 如 :“#ff83fa”， 默 认 值 为 #ffffff。 


backgroundTextStyle: 下 拉 背 景 字体 、Loading 图 的 样式 ， 仅 文 持 
dark/light。 


:enablePullDownRefresh: 是 侣 开局 下 拉 刷 新 ， 默 认为 false， 开 局 
后 ， 当 用 户 下 拉 时 会 触发 页 面 onPullDownRefresh 事 件 。 


配置 项 目 如 图 2-5 所 示 。 





navigationBa 





书籍 编写 demo 于 background 














图 2-5 ”界面 配置 区 域 


3.tabBar 配 置 





当 程 序 顶 部 或 底部 需要 菜单 栏 时 ， 我 们 可 以 通过 配置 tabBar 快 速 实 
现 ，tabBar 是 个 非 必 填 项 目 。 可 配置 属性 如 下 : 





:color: tab 上 的 文字 默认 颜色 ， 值 为 HexColor 〈 十 六 进 制 颜色 


值 )， 必 填 项 。 





selectedColor: tab 上 的 文字 选中 时 的 颜色 ， 值 为 HexColor 〈 十 六 进 
制 颜色 值 ) ， 必 填 项 。 


-backgroundColor: tab 的 背景 色 ， 值 为 HexColor( 十 六 进 制 颜色 
值 ) ， 必 填 项 。 


borderStyle: tabbar 上 边框 的 颜色 ， 仅 支持 black/white， 默 认 值 为 
black 。 


“list: tab 的 列表 ， 必 填 项 ， 其 值 为 一 个 数组 ， 最 少 dy 最 多 5 个 
tab， 数 组 中 每 一 项 是 一 个 对 象 ， 代 表 一 个 tab 的 相关 配置 ， 每 项 的 相关 
配置 如 下 : 


-pagePath: 页 面 路 符 ， 必 须 在 pages 中 先 定义 ， 必 填 项 。 
text: tab 上 按钮 的 文字 ， 必 填 项 。 


.iconPath: tab 上 icon 图 片 的 相对 路 径 ，icon 大 小 限制 为 40kb， 必 填 
项 。 


.SelectedIconPath: 选中 时 图 片 的 相对 路 径 ，icon 大 小 限制 为 40kb， 
必 填 项 。 





:position: tab 在 顶部 或 底 冰 可 选 值 为 bottom、top， 默 认 值 为 


bottom 。 
示例 代码 见 代码 清单 2-1。 


代码 清单 2-1 app.json 








"pages" 
"mypages/index/index", 
"mypages/list/list" 
], 
"tabBar" : 
"color™" :; "#000000", 
"selectedColor™" : "#ff7f50", 
"backgroundColor™" : "#ffffff", 
"borderSstyle" : "black", 
"list" : [ 
{ 
"iconPath" : "images/home.png", 
"selectedIconPath" : "images/home-selected.png", 
"pagePath" : "mypages/index/index", 
"text" lL "首页 " 
}, 
Ce , 
"iconPath" : "images/search.png", 
"selectedIconPath" : "images/search-selected.png", 
"pagePath" : "mypages/list/list", 
"text" : "搜索 " 
}, 
人 、 | 
"iconPath" : "images/list.png", 
"selectedIconPath" : "images/list-selected.png", 
"pagePath" : "mypages/list/list", 
"text" : "列表 " 
} 
], 
"borderSstyle" : "bottom" 
} 


} 





配置 后 页 面 效 果 如 图 2-6 所 示 。 
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图 2-6 ”tabBar 配 置 示例 


4.networkTimeout 配 置 


小 程序 中 各 种 网 络 请 求 API 的 超时 时 间 只 能 通过 networkTimeout 统 


一 设置 ， 不 能 在 API 中 单独 设置 ， 具 体 的 网 络 请 求 API 可 参考 后 面 章 
节 ，networkTimeout 支 持 的 属性 有 : 


:request: 设置 wx.request 的 超时 时 间 ， 单 位 之 秒 。 
connectSocket: 设置 wx.connectSocket 的 超时 时 间 ， 单 位 毫秒 。 
:uploadFile: 设置 wx.uploadFile 的 超时 时 间 ， 单 位 毫秒 。 
-downloadFile: 设置 wx.downloadFile 的 超时 时 间 ， 单 位 毫秒 。 


示例 代码 如 下 : 





"pages" : [ 
"mypages/index/index" 


本 
"networkTimeout" : { 
"request" : 60000, 
"connectSocket" : 60000 
} 
} 





5.debug 配 置 


此 配置 项 控制 是 人 否 开 局 debug 模 式 ， 默 认 是 关闭 的 。 开 局 debug 模 式 
后 ， 在 开发 者 工具 的 控制 面板 ， 调 试 信息 以 info 的 形式 输出 ， 如 图 2-7 所 
示 。 其 中 信息 有 Page 的 注册 、 页 面 路 由 、 数 据 更 新 、 事 件 触 及 ， 可 以 帮 
助 开发 者 快速 定位 一 些 常 见 问 题 。 


设置 ”动作 ”帮助 微 信 开 发 者 工具 0.10.101400 


@ iPhone 4 i [x Console Sources Network 分 
母 富 tp 





@@ App: onLaunch have been invoked WiService.ijs:2 


-I ats tan 
我 是 index 页 面 ， 你 点 击 了 0 次 @ App: onShow have been invcked WAService.is:2 


2 undcfincd app.js_ [sm]:8 
@ Register Page: mypages/index/index WAService.is:2 
@ Register page: mypages/list /list WAService.is:2 
@ on app route; mypeges/index/index Waservice.js:2 
@ mypages/index/index: onLoad have been invoked Waservics,.js:2 
@ mypages /index/index: onShcw have been invoked WAService.is:2 
@ Update view with init data WAService.is:2 
@ mvpages/index/index: onReady have been invoked WASeryice,is:2 











ps 


debug 模 式 信 息 . 





; |Console 





图 2-7 开局 debug 模 式 


示例 代码 如 下 : 





"pages" : [ 
"mypages/index/index", 
"mypages/list/list" 


], 


"debug" : true 


} 


ee | 


2.3.2 ”小 程序 逻辑 (app.js) 


小 程序 中 逻辑 文件 分 为 页 面 逻辑 文件 和 小 程序 逻辑 文件 ，app.js 便 
是 小 程序 逻辑 文件 ， 在 这 个 文件 中 ， 我 们 可 以 通过 App《〈) 函数 注册 小 
程序 生命 周期 函数 、 全 局 方法 和 全 局 属性 ， 已 注册 的 小 程序 实例 可 以 在 
其 他 逻辑 层 代 但 中 通过 getApp〈) 获取 。 





1. 注 册 小 程序 





App《〈) 函数 用 于 注册 一 个 小 程序 ， 参 数 为 一 个 Object 对 象 ， 在 这 
个 参数 对 象 中 我 们 可 以 注册 目 定 义 方 法 和 属性 供 全 局 使 用 ， 就 像 在 
quick start 项 目 中 ， 我 们 利用 App〈) 注册 了 用 户 登 录 信 息 。App 〈) 函 
数 必须 在 app.js 中 注册 ， 且 不 能 注册 多 个 ， 其 参数 属性 如 下 : 


.onLaunch: 生命 周期 函数 ， 监 听 小 程序 初始 化 。 当 小 程序 初始 化 
完成 时 ， 束 会 触发 onLaunch，onLoaunch 事 件 全 局 只 会 触及 一次。 





:onShow: 生命 周期 函数 ， 监 听 小 程序 显示 。 当 小 程序 启动 ， 或 者 
从 后 人 台 进 入 前 台 显 示 时 都 会 触发 onShow。 


“onHide: 生命 周期 函数 ， 监 听 小 程序 隐藏 。 当 小 程序 从 前 合 进入 
后 台 会 触发 。 


其 他 : 开发 者 可 以 添加 任意 的 函数 或 数据 到 Object 参数 中 ， 这 些 属 
性 会 被 注册 到 小 程序 对 象 中 ， 其 他 逻辑 文件 可 以 通过 getApp《〈) 函数 获 
取 已 注册 的 小 程序 实例 。 


关于 小 程序 生命 周期 函数 的 执行 时 机 我 们 要 特别 讲解 一 下 : 当局 动 
一 个 小 程序 时 ， 首 先 会 先 依 次 触发 onLaunch 和 onShow 方 法 ， 然 后 通过 
app.json 的 pages 属 性 注册 相应 的 页 面 ， 最 后 根据 默认 路 径 加 载 衣 页 ; 当 
用 户 点 击 左 上 角 关 闭 ， 或 者 按 了 设备 Home 按 钮 离开 微 信 时 ， 小 程序 并 
没有 直接 销毁 ， 而 是 进入 了 后 合 ， 这 两 种 情况 都 会 触发 onHide 方 法 ， 当 
再 次 唤醒 微 信 《针对 点 击 Home 按 钮 离开 微 信 ) 或 再 次 从 微 信 中 打开 小 
程序 时 ， 又 会 从 后 台 进 入 前 台 ， 这 时 会 触发 onShow 方 法 。 只 有 当 小 程 
序 进 入 后 台 一 定时 间 ， 或 者 系统 资源 占用 过 高 ， 才 会 被 真正 销 虹 








注册 小 程序 示例 代码 如 下 : 





App( 各 六 
on : function() { 
27 小 答应 初 如 信守 遍 时 的 可 


onshow function( ) { 
// 显示 小 程序 时 执行 


}, 
onHide : function() { 
// 隐藏 小 程序 时 执行 


}, 
globalFunction : ' 我 是 全 局 函数 '， 



































globalData : ' 我 是 全 局 属性 ' 
} ); 
2. 获 取 小 程序 实例 


注册 小 程序 后 ， 在 其 他 逻辑 文件 中 ， 可 以 通过 全 局 函数 getApp () 


获取 小 程序 实例 ， 例 如 : 





var app = getApp(); 
console.log( app.globalData ); 








在 App() 注册 的 函数 中 ， 我 们 可 以 使 用 this 直 接 获取 App 实 例 ， 
不 用 getApp() 方法 。 通 过 getApp〈) 获取 实例 后 ， 可 以 获取 注册 的 属 
性 、 调 用 注册 的 方法 ， 但 不 要 私自 调用 生命 周期 函数 (onLaunch、 
onShow、onHide) ， 这 样 会 打 乱 项 目 罗 辑 ， 除 非 你 已 经 对 它们 很 熟 
末 


4D o 


2.3.3 全 局 样式 (app.wxss) 








app.wxss 是 全 局 样式 表 ， 对 项 目 中 每 个 页 面 都 有 效 ， 可 将 一 些 系统 
级 别 的 统一 样式 风格 写 入 这 个 文件 ， 页 面 泻 染 时 ， 框 架 页 中 的 .wxss 文 
件 样式 会 履 盖 app.wxss 中 相同 的 选择 需 样 式 。WXSS 走 小 程序 基于 CSS 
拓展 的 一 套 样式 语言 ， 它 实现 了 CSS 大 部 分 规则 ， 其 具体 介绍 请 参考 下 


一 节 。 





小 程序 框架 主体 相关 的 文件 app.json、app.js、app.wxss 我 们 已 经 全 
部 介绍 完成 ， 下 面 为 大 家 介绍 框架 页 面相 关 的 文件 。 


2.4 框架 页 面 文件 





小 程序 中 一 个 框架 页 面包 含 4 个 文件 ， 同 一 框架 页 面 的 这 4 个 文件 必 
须 具 有 相同 的 路 径 与 文件 名 ， 进 入 小 程序 时 或 页 面 跳 转 时 ， 人 小 程序 会 根 
据 app.json 配 置 的 路 径 找到 对 应 的 资源 进行 泻 染 。 


.js 文件 ， 页 面 逻 辑 文 件 ， 必 要 项 。 
.wxml 文 件 ， 页面 结构 文件 ， 必 要 项 。 
.wxss 文 件 : 页 面 样式 文件 。 

:json 文 件 : 页 面 配 置 文件 。 


与 框架 主体 文件 相 比 框架 页 面 文 件 多 了 一 种 页 面 结构 文件 ， 其 余 3 
个 文件 和 框架 主体 文件 的 功能 类 同 ， 下 面 我 们 一 一 讲解 每 个 文件 作用 。 


2.4.1 页 面 配置 文件 


我 们 首先 讲解 页 面 配置 文件 ， 页 面 配置 文件 和 框架 配置 文件 一 样 ， 
古 一 个 json 文 件 ， 与 框 染 配 置 文件 不 同 的 是 ， 页 面 配 置 文件 是 非 必要 存 
在 的 ， 同 时 页 面 配置 文件 的 配置 项 只 有 window， 控 制 当前 页 面 的 窗口 











表现 ，window 的 属性 和 app.json 一 致 。 泻 染 页 面 时 ， 页 面 中 的 window 配 
置 项 会 覆盖 app.json 中 的 相同 配置 项 。 


由 于 页 面 的 .json 只 能 配置 window 相 关 属 性 ， 编 写 时 只 需 直 接 写 出 属 
性 ， 不 用 写 window 这 个 键 ， 如 下 所 示 : 





"navigationBarBackgroundColor": "#000000", 
"navigationBarTextStyle": "black", 
"navigationBarTitleText":; "我 的 页 面 "， 
"backgroundColor": "#efefef", 
"backgroundTextStyle": "light" 























2.4.2 ”页 面 逻 辑 文件 〈JavaScript) 


页 面 逻辑 文件 主要 功能 有 : 设置 初始 化 数据 ， 注 册 当 前 页 面 生命 周 
期 函数 ， 注 册 事 件 处 理 函 数 等 。 小 程序 的 馆 辑 层 文 件 是 JavaScript 文 件 ， 
所 有 的 逻辑 文件 ， 包 括 app.js， 最 终 将 会 打包 成 一 个 js 文件 ， 在 小 程序 启 
动 时 运行 ， 直 到 小 程序 销毁 ， 类 似 于 ServiceWorker， 上 所 以 逻辑 层 也 称 为 
App 9ervice。 





在 小 程序 中 ， 每 个 逻辑 文件 有 独立 的 作用 域 ， 并 有 具备 模块 化 能 
由 于 JavaScript 逻 辑 文 件 是 运行 在 纯 JavaScript 引 苟 中 而 并 非 运 行 在 浏览 
占 中 ， 一 些 浏览 器 提供 的 特有 对 象 ， 如 document、window 等 ， 在 小 程序 
中 都 无 法 使 用 ， 同 理 ， 一 些 基 于 document、window 的 框架 如 : jQuery、 
Zepto 都 不 能 在 小 程序 中 使 用 ， 同 时 我 们 不 能 通过 操作 DOM 改 变 页 面 ， 
这 时 需要 我 们 将 面 同 DOM 操 作 的 编程 思路 转化 为 数据 绑 定 和 事件 啊 
应 。 


1. 注 册页 面 


在 页 面 逻 辑 文件 中 需要 通过 Page 〈() 函数 注册 页 面 ， 指 定 页 面 的 初 
始 数据 、 生 命 周期 函数 、 事 件 处 理 函 数 等 ， 参 数 为 一 个 Object 对 象 ， 其 
属性 如 下 : 





.data: 页 面 的 初始 数据 ， 数 据 格式 必须 是 可 转 成 JSON 格 式 的 对 象 
类 型 。 当 页 面 第 一 次 演 染 时 ，data 会 以 JSON 的 形式 由 逻辑 层 传 至 演 染 
层 ， 泻 染 层 可 以 通过 WXML 对 数据 进行 绑 定 。 


-onLoad: 生命 周期 函数 ， 页 面 加 载 时 触发 。 一 个 页 面 只 会 调用 一 
次 ， 接 受 页 面 参数 ， 可 以 获取 wx.navigateTo、wx.redirectTo 以 及 中 的 
query 参 数 。 





-onShow: 生命 周期 函数 ， 页 面 显 示 时 触发 。 每 次 打开 页 面 都 会 
用 一 次 。 


-onReady: 生命 周期 函数 ， 页 面 初 次 泻 染 完 成 时 触发 。 一 个 页 面 生 
命 周期 中 只 会 调用 一 次 ， 代 表 当 前 页 面 已 经 准备 妥当 ， 可 以 和 视图 层 进 
行 区 互 。 一 些 对 界面 的 设置 ， 操 作 需 要 在 页 面 准 备 妥 当 后 调用 ， 如 
wx.setNavigationBarTitle 需 要 在 onReady 之 后 设置 ， 详 细 可 以 参考 后 面 
的 “页 面 生命 周期 小节 。 





:onHide: 生命 周期 函数 ， 页 面 隐 藏 时 触发 。 
:onUnload: 生命 周期 函数 ， 页 面 彼 载 时 触发 。 


:onPullDownRefresh: 页 面相 关 时 间 处 理 函 数 ， 用 户 下 拉 时 触发 。 
使 用 时 需要 将 app.json 配 置 中 window 的 enablePullDownRefresh 属 性 设置 
为 true。 当 处 理 完 数据 刷新 后 ， 可 以 调用 wx.stopPullDownRefresh 方 法 停 





止 当前 页 面 的 下 拉 刷 新 。 
.onReachBottom: 页 面 上 拉 触 底 事件 的 处 理 函 数 。 


其 他 : 开发 者 可 以 添加 任意 的 函数 或 数据 到 Object 参数 中 ， 可 以 用 
this 访 问 这 些 函 数 和 数据 。 


示例 代码 如 代码 清单 2-2 所 示 : 


代码 清单 2-2 页面 逻辑 文件 





// 获取 app 实 例 
var app = getApp(); 
Page( { 
data : { // 页 面 初始 化 数据 
count : 0 

















外 
onLoad : function() { 


// 页 面 加 载 时 执行 


onShow : function() { 
/ 页 面 打 开 时 执行 
console.1og( app.globalData ); 






































}, 
onReady : function() { 















































// 页 面 初次 泻 染 完成 执行 ， 一 个 页 面 只 会 调用 一 次 
} 
onHide : Wy { 
/ 页 面 隐 藏 时 执 和 


onunload : function() { 
// 页 面 人 印 载 时 执行 























} 
onpullDownRefresh : function() { 
// 下 拉 刷 新 时 执行 











onReachBottom : function() { 
下 拉 触 底 时 执行 

}, 

// 


定义 函数 ， 可 与 泻 染 层 中 的 组 件 进行 事件 绑 定 
countClick : function() { 
// 触发 视图 层 重 新 泻 染 
this.setData( { 
count : this.data.count + 1 


} ); 


也 
// 自 定 义 数 据 
customData : { 
name : ' 微 信 ' 


} 

























































































页 面 的 生命 周期 函数 比 小 程序 的 生命 周期 函数 略微 复杂 一 点 ， 弄 惟 
其 执行 顺序 能 避免 在 不 恰当 的 生命 周期 函数 中 调用 还 未 创建 的 对 象 或 方 
法 ， 小 程序 框 染 以 栈 的 形式 维护 了 当前 的 所 有 页 面 ， 当 发 生路 由 切换 
时 ， 页 面 栈 和 生命 周期 函数 的 关系 如 下 : 





小 程序 初始 化 : 默认 页 面 入 栈 ， 依 次 触发 默认 页 面 onLoad、 
onShow、onReady 方 法 。 





:打开 新 页 面 : 新 页 面 入 栈 ， 依 次 触发 新 页 面 onLoad、onShow、 
onReady 方 法 。 





页面 重 定向 : 当前 页 面 出 栈 并 缀 载 ， 触 发 当前 页 面 onUnload 方 
法 ， 新 页 面 入 栈 ， 触 发 新 页 面 onLoad、onShow、onReady 方 法 。 





页 面 返回 : 页 面 不 断 出 栈 并 凶 载 ， 触 发 当前 弹出 页 面 onUnload 方 
法 ， 下 到 返回 目标 页 面 ， 新 页 面 入 栈 ， 触 发 新 页 面 onShow 方 法 。 


"Tab 切换 当前 页 面 出 栈 但 不 季 载 ， 仅 触 帮 onHide 方 法 ， 新 页 面 入 
栈 ， 如 果 当 前 页 面 是 新 加 载 的 ， 触 发 onLoad、onShow、onReady 方 法 ， 
如 果 当 前 页 面 已 加 载 过 ， 仅 触发 onShow 方 法 。 


程序 从 前 台 到 后 台 : 触发 当前 页 面 onHide 方 法 ， 触 发 App onHide 方 
法 。 


.程序 从 后 台 到 前 台 : 触发 小 程序 onShow 方 法 ， 触 发 页 面 onShow 方 
法 。 


整体 来 说 ， 如 果 页 面 在 生命 周期 中 ， 只 会 触 帮 onShow 和 onLoad 方 
法 ， 只 有 加 载 和 介 载 时 才 会 触发 onLoad、onReady 和 onUnload 方 法 ， 而 
触发 页 面 外 载 只 有 页 面 返回 和 页 面 重 定向 两 种 操作 。 页 面 生 命 周期 函数 
的 执行 顺序 不 用 死记 硬 背 ， 开 发 过 程 中 可 以 开启 app.json 中 的 debug 模 
式 ， 路 由 切换 时 ， 小 程序 、 页 面 的 生命 周期 函数 执行 顺序 都 会 在 控制 台 
以 info 形 式 输出 ， 在 后 面 小 节 中 我 们 将 对 页 面 生 命 周期 作 简单 介绍 。 





2. 获 取 当 前 页 面 栈 


有 注册 就 有 获取 ，getCurrentPages 〈) 函数 便 是 用 于 获取 当前 页 面 
栈 的 实例 ， 页 面 栈 以 数组 形式 按 栈 顺 序 给 出 ， 第 一 个 元 素 为 首页 ， 最 后 
一 个 元 素 为 当前 页 面 。 不 要 尝试 修改 页 面 栈 ， 这 会 导致 路 由 以 及 页 面 状 


态 错 误 1 天 。 


示例 代码 如 下 : 





/* 获取 页 面 栈 */ 
Var pages = = getCurrentPages( ) 
/* 获取 当前 页 面 对 象 */ 


var currentPage = pages[pages.length - 1]; 























3. 事 件 处 理 函 数 


页 面 对 象 中 注册 的 函数 可 以 和 视图 层 中 的 组 件 进 行 绑 定 ， 当 达到 触 


发 条 件 时 ， 就 会 执行 Page 中 定义 的 相应 事件 ， 这 类 自 定 义 函 数 统称 为 事 
件 处 理 函 数 。 小 程序 中 组 件 的 事件 分 为 通用 事件 和 特殊 事件 ， 事 件 类 型 
请 参考 后 面 2.4.3 节 中 “事件 ”小 节 。 











示例 代码 如 下 : 








<view bindtap= "myevent "> 点 击 执行 逻辑 层 事件 </view> 





Page( 
myevent : function() { 
console.1log( ' 点 击 了 view' ); 





} 
} ); 
4. 触 发 视图 层 泻 染 


页 面 首次 加 载 时 ， 框 架 会 结合 初始 化 数据 泻 染 页 面 ， 在 逻辑 层 中 则 
需 主动 调用 Page.prototype.setData 〈) 方法 ， 而 不 能 直接 修改 Page 的 data 
值 ， 这 样 不 仅 无 法 触发 视图 层 泻 染 ， 还 会 造成 数据 不 一 致 。 当 
Page.prototype.setData 〈) 被 调用 时 ， 会 将 数据 从 逻辑 层 发 送 到 视图 层 
触发 视图 层 重 绘 ， 同 时 会 修改 Page 的 data 值 。setData 〈() 接受 一 个 
Object 对 象 参数 ， 方 法 会 自动 将 this.data 中 的 key 对 应 的 值 变 成 Object 参数 
中 key 对 应 的 值 。 当 Object 参数 key 对 应 的 值 和 this.data 中 key 对 应 的 值 一 
致 时 ， 将 不 会 触发 视图 层 泻 染 。 在 项 目 中 我 们 一 定 要 保证 视图 层 和 逮 辑 
层 的 数据 一 致 。 





Object 参数 的 key 值 非常 灵活 ， 可 以 按 数 据 路 径 的 形式 给 出 ， 如 
array[5].info、obj.key.subkey， 并 且 这 样 使 用 时 ， 不 需要 在 this.data 中 预 


先 定 义 。 


示例 代码 如 下 : 





<view>{{text}}</view> 
<button bindtap="changeText"> 修 改 普通 数据 </button> 





<view>{{object.subObject.objectText}}</view> 
<button bindtap="change0bjectText"> 修 改 对 象 数 据 </button> 


<view>{{array[0].arrayText}}</view> 
<button bindtap="changeArrayText"> 修 改 数 组 数据 </button> 





<view>{{newField.newFieldText}}</view> 
<button bindtap="addNewData"> 添 加 新 字段 </button> 


Page( { 
data : { 
text : 'normal data', 
object : { 


Subobject : { 
objectText : 'object data' 


} 
}, 
array : [ 
{ arrayText : 'array data' } 


] 
}, 
changeText : function() { 
this.setData( { 
/* 普通 索引 */ 
text : 'new normal data' 


} ); 


changeObjectText : function() { 
this.setData( { 
/* 按 路 径 索引 */ 
"object ,Subobject,objectText '” : 'new object data' 


F 

















}, 
changeArrayText : function() { 
this.setData( { 
/* 按 路 径 索 引 */ 
'array[0].arrayText' : 'new array data' 


x 


addNewData : function() { 
this.setData( { 
/* 修改 一 个 已 绑 定 ， 但 未 在 data 中 定义 的 数据 */ 
'newField.newFieldText' : "add new data' 


} ); 














页 面 的 生命 周期 整体 关系 痢 页 面 视 图 层 线程 和 页 面 逻 辑 层 线程 ， 注 
册页 面 时 ，Object 参 数 中 很 多 属性 都 是 生命 周期 函数 ， 这 些 函 数 的 调用 
和 页 面 生命 电 恳 相 关 ， 程 序 视 图 层 线程 和 负 辑 层 线程 基 系 如 图 2-8 所 


钞 。 
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图 2-8 ”Page 实例 的 生命 周期 





如 图 2-8， 线 程 局 动 后 视图 层 和 逻辑 层 相互 监听 ， 当 胃 辑 层 线程 触 
发 onLoad、onShow 方 法 后 会 把 初始 数据 data 传 送 给 视图 层 线程 ， 视 图 层 
完成 第 一 次 泻 染 后 触发 逻辑 层 onReady 方 法 ， 代 表 页 面 已 经 准备 妥当 ， 
之 后 我 们 便 可 通过 setData 方 法 主动 触发 视图 层 泻 染 。 当 页 面 被 调 往 后 人 台 
时 ， 和 触发 onHide 方 法 ， 这 时 逻辑 层 线程 并 没有 销毁 ， 我 们 仍然 可 以 通过 
代码 控制 视图 层 泻 染 ， 只 是 可 能 不 会 在 界面 上 表现 出 来 。 当 页 面 从 后 台 
回 到 前 台 时 ， 触 发 onShow 方 法 ， 最 后 当 页 面 销毁 时 ， 触 用 onUnload 方 
法 。 整 体 来 看 onLoad、onReady 和 onUnload 方 法 在 生命 周期 中 只 会 调用 
一 次 ， 生 命 周期 内 显示 、 隐 藏 页 面 都 是 触发 onShow 和 onHide 方 法 ， 在 
路 由 方式 中 ， 只 有 页 面 重 定向 和 页 面 返回 会 结束 当前 页 面 生命 周期 ， 当 
进入 一 个 已 加 载 的 页 面 时 只 会 触发 onShow 方 法 ， 不 会 触发 onLoad 和 
onReady 方 法 。 








2.4.3 ”页面 结构 文件 (WXML) 
WXML (WeiXin Markup Language) 是 框架 设计 的 一 套 标记 语言 ， 


用 于 泻 染 界面 ，WXMIL 的 泻 染 原理 和 React Native 思 路 一 致 ， 通 过 一 套 
标记 语言 ， 在 不 同 平台 被 解析 为 不 同 端的 泻 染 文件 ， 如 图 2-9 所 示 。 


WXML WAXSS 


小 程序 框 染 






iOS 界面 


Android 界面 Web 昼 面 


从 图 中 我 们 能 看 出 ，WXML 语 言 最 终 会 转译 为 宿主 端 对 应 的 语言 ， 
所 以 WXML 中 所 使 用 的 标签 一 定 是 小 程序 定义 的 标签 ， 不 能 使 用 目 定 义 
标签 ， 这 样 才能 保证 页 面 能 被 正确 转译 。 使 用 微 信 开 发 者 工具 开发 时 ， 
在 WXML 中 编写 一 些 HTML 标 签 或 自 定 义 标 签 仍 然 会 被 正常 解析 ， 这 会 


给 开发 者 造成 一 种 小 程序 能 直接 支持 HIML 标 签 的 误解 。 这 是 因为 微 信 
开发 者 工具 内 核 是 浏览 器 内 核 ， 同 时 小 程序 框架 并 没 对 WXML 中 的 标签 
和 WXSS 中 的 内 容 进行 强 验 证 ， 所 以 HTML 和 CSS 能 直接 被 解析 ， 但 这 
种 不 合法 的 WXML 在 手机 端 微 信 中 是 不 能 正常 显示 的 。 开 发 过 程 中 我 们 
一 定 要 拿 真 机 进行 测试 ， 保 证 程序 能 正常 运行 。 








中 





WXML 具 有 数据 绑 定 、 列 表演 染 、 条 件 泻 染 、 模 板 、 事 件 等 能 力 。 


1. 数 据 绑 定 





小 程序 中 页 面 泻 染 时 ， 框 架 会 将 WXML 文 件 同 对 应 Page 的 data 进 行 
绑 定 ， 在 页 面 中 我 们 可 以 直接 使 用 data 中 的 属性 。 小 程序 的 数据 绑 定 使 
用 Mustache 语 法 〈 双 大 括号 ) 将 变量 或 简单 的 运算 规则 包 起 来 ， 主 要 有 
以 下 几 种 演 染 方式 。 


(1 简单 绵 定 


简单 绑 定 是 指 我 们 使 用 Mustache 语 法 〈 双 大 括号 ) 将 变量 包 起 来 ， 
在 模板 中 直接 作为 字符 串 输出 使 用 ， 可 作用 于 内 容 、 组 件 属性 、 控 制 属 
性 、 关 键 字 等 输出 ， 其 中 关键 字 输 出 是 指 将 JavaScript 中 的 关键 字 按 其 真 
值 输出 。 


示例 代码 如 下 : 


<!- - 作为 内 容 --> 


<view>{{content}}</view> 


<1- - 作为 组 件 属性 --> 
<view id="item-{f{fidyy" style="border:{{border}}"> 作 为 属性 泻 染 </view> 


<!- - 作为 控制 属性 - 
<View WX : ifz"{fshowcontent]]jw> 作 为 属性 演 染 </viewz 


<1-- 关键 字 --> 
<view>{{2}}</view> 
<checkbox checked="{{false}}"></checkbox> 

















Page( { 
data : { 
border : 'solid 1ipx #000', 
Id : 1, 


content : ' 内 容 '， 
ShowContent : false 


} 
} ); 
运行 效果 如 图 2-10 所 示 。 
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图 2-10 ”简单 绑 定 演 染 效果 


a = 
生地 


组 件 属性 为 boolean 类 型 时 ， 不 要 直接 写 checked="false"， 这 样 
checked 的 值 是 一 个 false 的 字符 串 ， 转 成 boolean 类 型 后 代表 为 tue， 这 种 
情况 一 定 要 使 用 关键 字 输 出 : checked="{{false}}" 


(2) 运算 








在 {f 半 内 可 以 做 一 些 简 单 的 运算 ， 文 持 的 运算 有 三 元 运算 、 算 数 运 
算 、 逻 辑 判断 、 字 符 串 运算 ， 这 些 运 算 均 符 合 JavaScript 运 算 规 则 。 我 们 
利用 如 下 示例 为 大 家 展示 : 








<!-- 三 元 表达 式 --> 
<view>{{ showContent ? “' 显 示 文 本 ' : ' 不 显示 文本 '}}</view> 
<!-- 算数 运算 符 --> 


<view>{{ num1l + num2 } + 1+ {{ num3 }} = ? </view> 





<!-- 字符 串 运算 --> 
<view>{{ "name : " + name }}</view> 








<!-- 逻辑 判断 --> 
<view>{{ num3 > 0 }}</view> 


<!-- 数据 路 径 运 算 --> 
<view>{{ myObject.age }} {{myArray[1]}}</view> 





Page( { 
data : { 
ShowContent : false, 
num1 : 1, 
num2 : 2, 
num3 : 3, 
name : 'weixin', 
myObject : { 
age : 12 


了 
myArray : [arrl'，'arr2'] 


执行 后 界面 如 图 2-11 所 示 。 
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图 2-11 运算 示例 


(3) 组 各 


data 中 的 数据 可 以 在 模板 再 次 组 合成 新 的 数据 结构 ， 这 种 组 合 和 常常 
在 数组 或 对 象 中 使 用 。 


数组 组 合 比较 简单 ， 可 以 直接 将 值 放 置 到 数组 茶 个 下 标 下 : 








<view>{{ [myValue, 2, 3, 'stringtype'] }}</view> 
Page( { 


data : { 
myValue : 0 


} 
} ); 





最 终 页 面 组 合成 的 对 象 为 [0，2，3，'stringtype']。 
对 象 组 合 有 3 种 组 合 方式 ， 这 里 我 们 以 数据 注入 模板 为 例 。 


第 一 种 ， 直 接 将 数据 作为 value 值 进行 组 合 : 





<template is="testTemp" data="{{ name : myvaluei1, age : myvalue2 }}"></template> 


Page( { 
data : { 
myValue1 : "Value1'， 
myValue2 : 'value2' 
} 
} ); 





最 终 组 合 出 的 对 象 为 {name: 'valuel'’，age: 'value2'}。 


第 二 种 ， 通 过 “...” 将 一 个 对 象 展 开 ， 把 key-value 值 拷贝 到 新 的 结构 





<template is="testTemp" 
data="{{ ...my0bji, key5 : 5, ...my0bj2, key6 : 6 }}"> 
</template> 


Page( { 
data : { 
my0bj1 : 
keyl1 : 
key2 : 


DP 


}, 

myobj2 : { 
key3 : 3, 
key4 : 4 


最 终 组 合成 的 对 象 为 {key1: 1，key2: 2，key5: 5，key3: 3 
key4: 4, key6: 6} 





第 三 种 ， 如 果 对 象 key 和 value 相 同 ， 可 以 只 写 key 值 : 





<template is="testTemp" data="{{ key1，key2 }}"></template> 


Page( { 


data : { 
keyi1 : 1, 
key2 : 2 
} 
} ); 








这 种 写法 最 后 组 合成 的 对 象 是 {keyl: 1，key2: 2} 











上 述 3 种 方式 可 以 根据 项 目 灵活 组 合 ， 要 注意 的 是 和 js 中 的 对 象 一 
样 ， 如 果 一 个 组 合 中 有 相同 的 属性 名 时 ， 后 面 的 属性 将 会 覆盖 前 面 的 属 
性 ， 如 : 





<template is="testTemp" data="{{..myO0bj, key1 : 3}}"></tamplate> 


Page({ 
data : { 
key1 : 1, 
key2 : 2 
} 
}); 








示例 中 key1l 是 重复 的 属性 ， 那 么 后 面 的 属性 将 会 覆盖 前 面 的 属性 ， 
最 终 组 合生 成 的 对 象 为 {key1: 3，key2: 2}。 


让 


(1) wx: 让 


除了 简单 的 数据 绑 定 ， 我 们 常常 会 使 用 逻辑 分 文 ， 这 时 候 可 以 使 用 
wx: f=”{{ 判 断 条 件 }}” 来 进行 条 件 演 染 ， 当 条 件 成 立时 洽 染 该 代码 
块 : 








<view wx:if="{{showContent}}"> 内 容 </view> 


Page( { 
data : { 
ShowContent : false 


} 
} ); 





示例 中 view 代 码 块 将 不 会 泻 染 ， 只 有 当 showContent 的 值 为 true 时 才 


泻 染 。 


普通 的 编程 语言 一 样 ，WXML 也 支持 wx: elif 和 wx: else， 如 : 





<view wx:if="{{false}}">1</view> 
<view wx:elif="{{false}}">2</view> 
<view wx:else>3</view> 








示例 中 页 面 只 泻 染 最 后 一 个 <view/>。wx: elif 和 wx: else 必 须 和 
wx: 证 配合 使 用 ， 和 否则 会 导致 页 面 解析 出 错 ， 在 项 目 中 大 家 一 定 要 注 


ee 
局 \。o 





(2) block wx: 让 


wx: if 是 一 个 控制 属性 ， 可 以 添置 在 任何 组 件 标签 上 ， 但 如 末 我 们 








再 要 包装 多 个 组 件 ， 又 不 想 影 啊 布 局 ， 这 时 就 需要 使 用 <block/> 标 签 将 
需要 包装 的 组 件 放置 在 里 面 ， 通 过 wx: if 作 判断 。<block/> 不 是 一 个 组 
件 ， 仅 仅 是 一 个 包 闭 元 素 ， 页 面 泻 染 过 程 中 不 做 任何 泻 染 ， 由 属性 控 
制 ， 如 下 所 示 : 





<block wx:if="{{true}}"> 
<view>view 组 件 </view> 
<image/> 

</block> 








(3) wx: if 与 hidden 


除了 wx: if 组 件 ， 也 可 以 通过 hidden 属 性 控制 组 件 是 否 显示 ， 开 发 
者 难免 有 疑问 ， 这 两 种 方式 该 怎样 取舍 ， 这 里 我 们 整理 了 两 种 方式 的 区 


品 


别 : 


-wx: if 控制 是 否 泻 染 条 件 块 内 的 模板 ， 当 其 条 件 值 切 换 时 ， 会 触发 
局 部 泻 染 以 确保 条 件 块 在 切换 时 销毁 或 重新 浑 染 。wx: if 是 惰性 的 ， 如 
果 在 初始 泻 染 条 件 为 false 时 ， 框 架 将 什么 也 不 做 ， 在 条 件 第 一 次 为 真 时 
才 局 部 泻 染 。 


-hidden 控制 组 件 是 否 显示 ， 组 件 始终 会 被 泻 染 ， 只 是 简单 控制 显示 


与 隐藏 ， 并 不 会 触发 重新 渲染 和 销毁 。 





综合 两 个 泻 染 流程 可 以 看 出 ， 由 于 wx: if 会 触发 框架 局 部 泻 染 过 
程 ， 在 频繁 切换 状态 的 场景 中 ， 会 产生 更 大 的 消耗 ， 这 时 尽量 使 用 





hidden; 在 运行 时 条 件 变动 不 大 的 场景 中 我 们 使 用 wx: 这， 这样 能 保证 
页 面 有 更 高 效 的 渲染 ， 而 不 用 把 所 有 组 件 都 泻 染 出 来 。 





3. 列 表演 染 


(1) wx: for 


组 件 的 wx: for 控 制 属 性 用 于 壳 历 数组 ， 重 复 演 染 该 组 件 ， 遇 历 过 
程 中 当前 项 的 下 标 变量 名 默认 为 index， 数 组 当前 项 变量 名 默认 为 item， 
如 : 





<view wx:for="{{myArray}}"> 
{{index}}:{{item}} 


</view> 
Page( { 
data : { 
myArray : [ 'value1', 'value2' | 


} 
} ); 





通过 授 历 myArray， 页 面 演 染 了 两 个 <view/>， 结 果 如 图 2-12 所 示 。 
(2) wx: for-index 和 wx: for-item 


index、item 变 量 名 可 以 通过 wx: for-index、wx: for-item 属 性 修 


改 ， 如 : 





<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem"> 
{{myIndex}}:{{myItem.name}} 
</view> 
Page( { 
data : { 
myArray : [ 
{ name : 'valuel1' }, 


{ name : 'value2' } 
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图 2-12 ”列表 泻 染 示例 1 


演 染 结果 如 图 2-13 所 示 。 
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图 2-13 ”列表 泻 染 示 例 2 
普通 遍历 中 我 们 没 必要 修改 index、item 变 量 名 ， 当 wx: for 髓 套 使 
用 时 ， 就 有 必要 设置 变量 名 ， 避 免 变 量 名 冲突 ， 下 面 我 们 过 历 一 个 二 维 
数组 : 








<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem"> 
<block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem" > 
{{subItem}} 
</block> 
</view> 


Page( { 
data : { 


myArray : [ 
[1, 2, 3], 
[4, 5, 6], 
[7, 8, 9] 


微 信 开 发 者 工具 0.10.101400 | 


” [x Console 
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> 





Console 





图 2-14 ”列表 泻 染 示例 3 


在 本 示例 中 ， 我 们 使 用 了 <block> 标 签 ， 和 block wx: 让 一 样 ，wx: 
for 可 以 直接 在 <block/> 标 签 上 使 用 ， 以 演 染 一 个 包含 多 个 节点 的 结构 


块 。 


4. 模 板 








在 项 目 过 程 中 ， 币 种 会 遇 到 茶 些 相同 的 结构 在 不 同 的 地 方 反 复出 
现 ， 这 时 可 以 将 相同 的 布局 代码 片段 放置 到 一 个 模板 中 ， 在 不 同 的 地 方 
传 入 对 应 的 数据 进行 渲染 ， 这 样 能 避免 午 复 开发 ， 提 升 开 友 效 率 。 


(1) 定义 模板 


定义 模板 非常 简单 ， 在 <template/> 内 定义 代码 片段 ， 设 置 
<template/> 的 name 属 性 ， 指 定 模板 名 称 即 可 。 如 : 


<template name="myTemplate"> 
<view> 内 容 </view> 
<view>{{content}}</view> 
</template> 


(2) 使 用 模板 


使 用 模板 时 ， 设 置 is 属 性 指向 需要 使 用 的 模板 ， 设 置 data 属 性 ， 将 
模板 所 需 的 变量 传 入 。 模 板 拥有 自己 的 作用 域 ， 只 能 使 用 data 属 性 传 入 
的 数据 ， 而 不 是 直接 使 用 Page 中 的 data 数 据 ， 演 染 时 ，<template/> 标 签 
将 被 模板 中 的 代码 块 完全 蔡 换 。 





示例 代码 如 下 : 


<template name="myTemplate"> 


<View> 内 容 </VIiew> 
<view>{{content}}</view> 
<view>{{name}}</view> 
<view>{{my0bj.key1}}</view> 
<view>{{key2}}</view> 


</template> 
<template is="myTemplate" data="{{content : ' 内 容 '，name, my0bj, ...my0bj2}}"/> 
Page( { 
data : { 
name : 'myTemplate', 
myobj : { 
key1 : 'valuel' 
}, 
myobj2 : { 
key2 : 'value2' 
} 
} 
} ); 





执行 效果 如 图 2-15 所 示 。 


模板 可 以 网 套 使 用 ， 如 下 所 示 : 





<template name="bTemplate"> 
<view>b tempalte content</view> 

</template> 

<template name="aTemplate"> 
<view>a template content</view> 
<template is="bTemplate"/> 

</template> 

<template is="aTemplate"/> 


i 
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图 2-15 ”模板 示例 


泻 染 结果 如 图 2-16 所 示 。 
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图 2-16 贬 套 使 用 模板 
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模板 i 属 性 文 持 数 据 绑 定 ， 在 项 目 过 程 中 我 们 可 以 通过 属性 绑 定 动 


态 决定 使 用 哪个 模板 ， 如 : 





<template is="{{templateName}}" data="myData"/> 





5. 事 件 


WXML 中 的 事件 系统 和 HTML 中 DOM 事 件 系统 极其 相似 ， 也 是 通 
过 在 组 件 上 设置 “bind (或 catch)〉 + 事件 名 ”属性 进行 事件 绑 定 ， 当 触发 
事件 时 ， 框 架 会 调用 逻辑 层 中 对 应 的 事件 处 理 函 数 ， 并 将 当前 状态 通过 


参数 传递 给 事件 处 理 函 数 ， 由 于 小 程序 中 没有 DOM 节 点 概念 ， 所 以 事 
通过 逻辑 层 动态 绑 定 。 官 方 对 WXML 事 








件 只 能 通过 WXML 绑 定 ， 不 能 
件 的 定义 如 下 : 


:事件 是 视图 层 到 逻辑 层 的 通讯 方式 。 

-事件 可 以 将 用 户 的 行为 反馈 到 逻辑 层 进行 处 理 。 

事件 可 以 绑 定 在 组 件 上 ， 当 触发 事件 时 ， 台 会 执行 馆 辑 层 中 对 应 
的 事件 处 理 函 数 。 


事件 对 象 可 以 携带 额外 信息 ， 如 id、dataset、touches。 
(1) 事件 分 类 

事件 分 为 冒 泡 事件 和 非 冒 泡 事件 : 

冒 泡 事件 : 当 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 会 向 父 节点 传 


' 非 冒 泡 事件 当 一 个 组 件 上 的 事件 被 触发 后 ， 该 事件 不 会 同 父 市 
扩 传 递 。 





有 前 端 开发 经 验 的 开发 者 应 该 对 事件 骨 泡 都 有 一 定 了 解 ， 当 一 个 事 
件 被 触及 后 ， 该 事件 会 沿 该 组 件 回 其 父 级 对 象 传 播 ， 从 里 到 外 依次 执 
行 ， 直 到 布点 最 顶层， 这 个 是 个 非常 有 用 的 特性 ， 通 利用 于 实现 事件 代 
理 ， 有 具体 实现 方案 将 在 下 文中 具体 讨论 。 

















WXML 冒 泡 事 件 如 下 : 

touchstart: 手指 触摸 动作 开始 。 

-touchmove: 手指 触摸 后 移动 。 

touchcancel: 手指 触摸 动 作 被 打 断 ， 如 来 电 提醒 、 弹 窗 。 
touchend: 手指 触摸 动作 结束 。 

tap: 手指 触摸 后 马上 离开 。 


-longtap: 手指 触摸 后 ， 超 过 350ms 再 离开 。 








对 于 冒 泡 事件 每 个 组 件 都 是 默认 文 持 的 ， 除 上 述 事 件 之 外 的 其 他 组 
件 目 定 义 事件 如 无 特殊 声明 都 是 非 冒 泡 事件 ， 如 : <form/> 的 submit 事 
件 ，<scroll-view/> 的 scrol 事 件 ， 详 细 信 息 请 参考 各 组 件 文档 。 





(2) 事件 绑 定 


在 之 前 内 容 中 ， 已 经 多 次 实现 事件 绑 定 ， 大 家 应 该 比较 熟悉 了 ， 事 


件 绑 定 的 写法 和 组 件 的 属性 一 样 ， 以 key、value 形 式 组 织 。 


key: 以 bind 或 catch 开 头 ， 然 后 跟 上 事件 类 型 ， 字 母 均 小 写 ， 如 


bindtap, catchtouchstart 。 


value: 事件 函数 名 ， 对 应 Page 中 定义 的 同名 函数 。 找 不 到 同名 函 
数 会 导致 报错 。 


绑 定 时 bind 事 件 绑 定 不 会 阻止 冒 泡 事件 网 上 冒 泡 ，catch 事 件 绑 定 会 
阻止 冒 泡 事件 同上 冒 泡 。 


冒 泡 示例 如 下 : 





<view bindtap="tap1"> 


Ww 
<view catchtap="tap2"> 
View2 
<view bindtap="tap3"> 
VvView3 
</view> 
</view> 
</view> 





如 上 述 示例 中 ， 点 击 view3 时 会 先后 触发 ttp3 和 tap2 事 件 ， 由 于 
view2 通 过 catch 阻 止 了 tap 事 件 冒 泡 ， 这 时 tap1 将 不 会 执行 ， 点 击 view2 只 
触发 ttp2， 点 击 view1 只 触发 tap1。 


(3) 事件 对 象 


如 采 没 有 特殊 说 明 ， 当 组 件 触及 事件 时 ， 近 辑 层 绑 定 该 事件 的 事件 


处 理 函 数 会 收 到 一 个 事件 对 象 ， 如 : 





<view bindtap="myevent">view</view> 


Page( { 
myevent : function( e ) { 
console.log( e ); 


} 
} ); 





上 上述 代码 中 ，myevent 参 数 e 便 是 事件 对 象 ， 这 和 JavaScript 事 件 绑 定 
特别 像 。 上 述 代 码 执 行 后 事件 对 象 输出 如 下 : 








{ 
"type" "tap", 
"timeStamp":6571., 
"target":{ 
"id" 1 oe 
"offsetLeft":0, 
"offsetTop":0, 
"dataset":{ 
} 
了 
"currentTarget":{ 
"id" 1 mm 
"offsetLeft":0, 
"offsetTop":0, 
"dataset":{ 
} 
}, 
"detail":{ 
se . 15, 
"y" :11 


}, 
"touches":[ 


"identifier":0, 
"pageX" :15， 
"pageY" :11， 
"clientX":15, 
"clientY":11 

} 


] 
"changedTouches":[ 


"identifier":0, 
"pageX" :15， 
"pageY" :11， 
"clientX":15, 
"clientY":11 








事件 对 象 属性 基本 可 分 为 三 类 : BaseEvent、CustomEvent、 


TouchEvent。 





BaseEvent 为 基础 事件 对 象 属性 ， 包 括 : 
type: 事件 类 型 。 


timeStamp: 事件 生成 时 的 时 间 惟 ， 页 面 打开 到 触发 所 经 过 的 坚 秘 
数 。 


-target: 触发 事件 源 组 件 ( 即 冒 泡 开始 的 组 件 ) 的 相关 属性 集合 ， 
属性 如 下 : 


id: 事件 源 组 件 的 id。 

-tagName: 事件 源 组 件 的 类 型 。 

-dataset: 事件 源 组 件 上 由 data- 开 头 的 自 定义 属性 组 成 的 集合 。 
currentTarget: 事件 绑 定 的 当前 组 件 的 相关 属性 集合 ， 属 性 如 下 : 
id: 当前 组 件 的 id。 


:tagName: 当前 组 件 的 类 型 。 


.dataset: 当前 组 件 上 由 data- 开 头 的 自 定 义 属 性 组 成 的 集合 。 
<canvas/> 中 的 触摸 事件 不 可 冒 泡 ， 所 以 没有 currentTarget。 


dataset 是 组 件 的 目 定义 数据 ， 通 过 这 种 方式 可 以 将 组 件 的 目 定 义 属 
性 传递 给 逻辑 层 。 书 写 方式 为 : 以 data- 开 头 ， 多 个 单词 由 连 字 符 ' 人 一连 
接 ， 属 性 名 不 能 有 大 写 “大写 最 终 会 被 转 为 小 写 ) ， 最 终 在 dataset 中 将 

连 字符 转 成 弦 峰 形式 ， 如 : 








<view bindtap="myevent" data-my-name="weixin" data-myAge="12"> 
dataset 示例 
</view> 


Page( { 
myevent : function( e ) { 
console.log( e,currentTarget ,dataset ); 
} 
} ); 





最 后 dataset 打 印 出 来 为 : 





1 
大 心 r /这 


"myName" : "weixin"，// 连 字 符 被 转 成 驼峰 
"myage" : "12" // 所 有 大 写字 符 都 被 转 为 小 写 

















CustomEvent 为 自 定义 事件 对 象 〈 继 承 BaseEvent) ， 只 有 一 个 属 


detail: 额外 信息 ， 通 常 传递 组 件 特殊 信息 。 


detail 没 有 统一 的 格式 ， 在 <form/> 的 submit 方 法 中 它 是 {"value": 


{}，"formId": ""}， 在 <swiper/> 的 change 事 件 中 它 是 {"'current": 
current}， 具 体内 容 参 考 组 件 相关 文档 。 


TouchEvent 为 触摸 事件 对 象 ( 继 承 BaseEvent) 属性 如 下 所 示 : 





touches: 触摸 事件 ， 当 前 停留 在 屏幕 中 的 触摸 点 信息 的 数组 。 


changedTouches: 触摸 事件 ， 当 前 变化 的 触摸 点 信息 的 数组 ， 如 从 
无 变 有 (touchstart) 、 位 置 变 化 〈touchmove) 、 从 有 变 无 (touchend、 


touchcancel) 。 


由 于 支持 多 点 触摸 ， 所 以 touches 和 changedTouches 都 是 数组 格式 ， 
每 个 元 素 为 一 个 Touch 对 象 〈canvas 触 摸 事 件 中 为 CanvasTouch 对 象 ) 。 


Touch 对 象 相关 属性 如 下 : 
-identifier: 触摸 点 的 标识 符 。 


:pageX，pageY: 距离 文档 左上 角 的 距离 ， 文 档 的 左上 角 为 原点 ， 
横向 为 X 轴 ， 纵 向 为 Y 轴 。 





:clientX，clientY: 距离 页 面 可 显示 区 域 〈 屏 幕 除去 导航 条 ) 左上 
角 的 距离 ， 横 癌 为 X 轴 ， 纵 问 为 Y 轴 。 


CanvasTouch 对 象 相关 属性 如 下 : 


-identifier: 触摸 点 的 标识 符 。 


X，y: 距离 Canvas 左 上 和 角 的 距离 ，Canvas 的 左上 和 角 为 原点 ， 横 问 
为 X 轴 ， 纵 同 为 Y 轴 。 


6. 引 用 


一 个 WXML 可 以 通过 import 或 include 引 入 其 他 WXML 文 件 ， 两 种 方 
式 都 能 引入 WXML 文 件 ， 区 别 在 于 import 引 入 WXML 文 件 后 只 接受 模板 
的 定义 ， 忽 略 模 板 定 义 之 外 的 所 有 内 容 ， 而 且 使 用 过 程 中 有 作用 域 的 概 
念 。 与 import 相 反 ，include 则 是 引入 文件 中 除 <template/> 以 外 的 代码 直 
接 拷贝 到 <include/> 位 置 ， 整 体 来 说 import 是 引入 模板 定义 ，include 是 引 
入 组 件 。 


(1) import 





<import/> 的 src 属 性 是 需要 被 引入 文件 的 相对 地 址 ，<import/> 引 入 
会 忽略 引入 文件 中 <template/> 定 义 以 外 的 内 容 ， 如 下 例 中 ， 在 a.wxml 引 
入 b.wxml，b.wxml 中 <view/> 和 <template is="bTemplate"/> 都 被 忽略 ， 仅 
引入 了 模板 的 定义 ， 在 a.wxml 中 能 使 用 b.wxml 中 定义 的 模板 : 





<import Src="b .wxm1"/> 
<template is="bTemplate" data=""/> <!-- 使 用 b.wxml 中 定义 的 模板 - -> 





























<View> 内 容 </view> <!-- import 引 用 时 会 被 忽略 --> 

<template name="bTemplate"> 
<view>b template content</view> 

</template> 

<template is="bTemplate"/> <!-- import 引 用 时 会 被 忽略 --> 























ee | 


上 述 代 码 中 ，a.wxml 中 的 <view/> 并 没有 被 泻 染 ， 如 图 2-17 所 示 。 
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图 2-17 _ import 示例 1 


import 引 用 有 作用 域 概念 ， 只 能 直接 使 用 引入 的 定义 模板 ， 而 不 能 
使 用 间接 引入 的 定义 模板 ， 如 下 例 ， 在 awxml 中 引入 b.wxml，b.wxml 再 
引入 cwxml， 这 样 a 能 直接 使 用 b 中 定义 的 模板 ，b 能 使 用 c 中 定义 的 模 
板 ， 但 a 不 能 使 用 c 中 的 模板 : 





<import src="b.wxml"/> 
<template is="bTemplate"/> 
<template is="cTemplate"/> <!-- 不 能 直接 调用 c .wxml 中 的 模板 ” - -> 



































<import src="c.wxml"/> 
<view>b content</view> <!-- import 时 被 忽略 --> 
<template name="bTemplate"> 
<template is="cTemplate"/> 
<view>b tempalte content</view> 
</template> 
<template is="cTemplate"/> <!-- import 时 被 忽略 --> 


<template name="cTemplate"> 
<view>c template content</view> 
</template> 





演 染 效果 如 图 2-18 所 示 。 
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图 2-18 ”import 作 用 域 示 例 


(2) include 


include 引 入 会 将 模板 定义 标签 外 的 内 容 〈 含 模板 使 用 标签 ) 直接 赋 
值 蔡 换 <include/>， 我 们 基于 上 个 案例 进行 修改 ， 大 家 对 比 一 下 : 





<include src="b.wxml"/> 








jb .wxml 中 的 模板 ”--> 
jc .wxml 中 的 模板 ”--> 


<template is="bTemplate"/> <!-- 不 能 
<template is="cTemplate"/> <!-- 不 能 
































<include src="c.wxml"/> 
<view>b content</view> <!-- 不 会 被 忽略 --> 


<template name="bTemplate"> 
<template is="cTemplate"/> <!-- 不 会 调用 c .wxml 中 的 模板 ， 引 用 时 已 被 忽略 - -> 
<view>b tempalte content{{name}}</view> 
</template> 















































<template is="bTemplate" data="{{name}}"/> <!-- 没有 被 忽略 ， 能 正常 调用 自己 文件 











中 的 模板 - -> 





T 











<template name="cTemplate"> 
<view>c template content</view> 
</template> 


Page( { 
data : { 
name : '2' /* 能 将 数据 注入 到 b .wxml 中 */ 


} 
} ); 








运行 效果 如 图 2-19 所 示 。 
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图 2-19 include 引入 示例 


通过 对 比 发 现 ，import 更 适合 引用 模板 定义 文件 ，include 更 适合 引 
入 组 件 文件 ， 在 项 目 中 大 家 可 以 根据 特性 灵活 使 用 。 


WXML 虽 然 是 一 门 新 标签 语言 ， 但 大 部 分 规则 和 其 他 前 端 模板 语言 
大 同 小 民 ， 本 节 WXML 规 则 整体 可 分 为 数据 绑 定 ， 事 件 机 制 ， 模 板 语 读 
《条件 泻 染 、 列 表演 染 ) ， 页 面 引用 《引用 规则 、 模 板 ) ， 大 家 可 以 对 
比 其 他 模板 语言 学 习 。 





2.4.4 页 面 样式 文件 (WXSS) 





WXSS (WeiXin Style Sheets) 是 基于 CSS 拓 展 的 样式 语言 ， 用 于 描 
述 WXML 的 组 件 样 式 ， 决 定 WXML 的 组 件 该 怎么 显示 ， 它 具有 CSS 的 大 
部 分 特性 ， 在 CSS 基 础 上 WXSS 拓 展 了 尺寸 单位 、 样 式 导 入 特性 ， 对 
CSS 选 择 器 属性 上 做 了 部 分 兼容 ， 目 前 官方 文档 没有 给 出 WXSS 具 体 具 
备 CSS 哪 些 特性 ， 在 开发 过 程 中 不 能 想当然 地 使 用 CSS 属 性 ， 一 定 要 使 
用 iOS 和 Android 真 机 进行 调试 ， 本 小 市 主要 讲述 WXSS 和 CSS 的 不 同 
点 ， 后 续 布局 章节 会 讲解 CSS 盒 子 模型 布局 相关 属性 ， 其 余 CSS 属 性 大 
家 可 以 参考 W3C 规 范 ， 在 WXSS 中 我 们 甚至 能 使 用 一 些 兼 容 性 写法 ， 不 
过 在 开发 过 程 中 我 们 一 定 要 开局 开发 者 工具 中 “开局 上 传代 码 时 样式 文 
件 自动 补 全 ”功能 ， 这 样 小 程序 会 自动 补 全 其 余 一 些 样式 的 兼容 性 写 
法 ， 保 证 在 不 同 终端 达到 统一 视觉 效果 。 





1. 尺 寸 单 位 











CSS 中 原 有 尺寸 单位 在 不 同 尺寸 屏幕 中 不 能 完美 实现 元 素 按 比例 缩 
放 ，WXSS 在 此 基础 上 拓展 了 两 种 尺寸 单位 : rpx (responsive pixel) 和 
rem (root em) ， 这 两 种 尺寸 单位 都 是 相对 单位 ， 最 终 会 被 换算 成 px， 
使 用 rpx 和 rem 布 局 页 面 能 让 页 面 界面 在 不 同 尺寸 屏幕 中 按 比例 缩放 。 











(1) rpx 





在 泻 染 过 程 中 mpx 会 按 比 例 转化 为 pz，WXSS 规 定 屏 幕 宽 度 为 





750rpx， 如 在 iPhone6 中 ， 屏 幕 宽度 为 375px， 即 750rpx=375px， 那 么 在 
iPhone6 中 1rpx=0.5px。 


(2 ) rem 





同 rpx 一 样 ，WXSS 规 定 屏 幕 宽度 为 20rem， 同 样 在 iPhone6 中 ， 屏 幕 
宽度 为 375px， 即 20rem=375px， 上 所 以 在 iPhone6 中 1rem=18.75px。 


以 常规 设备 为 例 ， 这 些 尺 寸 换算 如 表 2-1 所 示 。 


表 2-1 rpx、rem 与 px 换算 关子 示例 


(屏幕 宽度 /750 ) ( 750/ 屏幕 宽度 ) (屏幕 宽度 /20 ) ( 20/ 屏幕 宽度 ) 
1iPhone6 Plus lrpx=0.552px lpx=0.04830..px 





在 设计 界面 时 ， 如 果 要 实现 尺寸 自 适应 ， 设 计 师 可 以 用 iPhone6 作 
为 视觉 标准 。 由 于 rpx 和 和 rem 最终 要 被 换算 为 px， 在 某 些 情况 下 可 能 会 存 
在 除 不 尽 的 情况 ， 会 导致 界面 中 产生 毛刺 ， 这 种 情况 大 家 要 多 留意 、 多 
测试 以 尽量 避免 这 种 情况 。 








2. 选 择 右 


CSS 选 择 器 用 于 选择 需要 添加 样式 的 元 素 ，WXSS 实 现 了 CSS 的 部 
分 选择 器 ， 使 用 规则 和 CSS 一 样 ， 熟 悉 CSS 的 同学 会 很 快 上 手 ， 参 见 表 


表 2-2 选择 器 样 例 


选择 器 样 例 描述 
is 选择 所 有 拥有 class="myClassName" 的 组 件 
#id 选择 拥有 id="myIdName" 的 组 件 
element 选择 所 有 view 组 件 
element, element 选择 所 有 文档 的 view 组 件 和 所 有 checkbox 组 件 
::after 在 view 组 件 后 边 插 入 内 容 
::before 在 view 组 件 前 面 插入 内 容 


WXSS 和 CSS 代 码 结构 一 样 ， 一 段 样式 前 面 是 选择 器 ， 后 面 是 以 大 
括号 括 起 来 的 样式 组 合 ， 每 个 样式 以 分 号 结束 ， 如 下 所 未: 





选择 器 { 样式 1; 样式 2; } 











选择 器 使 用 规则 和 CSS 也 是 一 致 的 ， 如 下 所 示 : 








/* 选择 所 有 class 含 有 myClass 的 组 件 ， 并 设置 边框 */ 
.myClass { border : solid 1px #000; } 



































/* 选择 所 有 view 组 件 且 class 含 有 myClass 的 组 件 ， 并 设置 边框 */ 
view.myClass { border : solid 1px #000; } 


/* 选择 所 有 view 组 件 中 子 节点 class 含 有 myClass 的 组 件 设置 边框 */ 
view .myClass { border : Solid 1px #000; } 


HH 






























































/* 


选 所 有 class 含 有 myContent 组 件 中 所 有 checkbox 组 件 和 radiobox 组 件 设置 它们 的 边 机 
*/ 














TEHI 



























































.myContent checkbox, 
.myContent radiobox { boder : solid 1px #000; } 


/* 选择 所 有 view 组 件 且 class 含 有 myClass 的 组 件 ， 在 其 后 面 插入 新 内 容 ， 内 容 为 new content*/ 
view.myClass::after { content : 'new content' } 












































3. 内 联 样 式 


同 HIML 一 样 ， 样 式 除 了 写 在 WXSS 文 件 中 ， 也 可 以 通过 设置 
style、class 属 性 控制 样式 ， 一 般 静 态 样 式 可 以 统一 写 到 class 中 ，style 样 
式 会 在 运行 时 解析 ， 如 非特 别 需 要 ， 尽 量 避 免 将 静态 样式 写 入 style， 以 
免 影 响 演 染 速度 ， 例 如 : 








<!- 通过 sty]e 动 态 设置 f 式 --> 
<view style="border:solid 1px #000;background-color:{{color}}"></view> 
<!-- 通过 class 选 择 器 设置 样式 --> 


























<view class="myClassName1 myClassName"></view> 





4. 样 式 导 入 


通常 在 项 目 中 为 了 便于 管理 会 将 WXSS 按 职责 拆 分 为 多 个 文件 ， 这 
时 便 需 要 @import 语 句 在 当前 WXSS 文 件 中 导入 其 他 WXSS 文 件 ， 
@import 后 写 入 需要 导入 WXSS 文 件 的 相对 路 径 ， 用 *; ”表示 语句 结 
束 ， 例 如 : 





.Common-view { border : solid 1px #000; } 


@import "common.wxss"; 
.phage-container { padding : 10px; } 











至 此 ， 小 程序 框架 页 面相 关 的 4 个 文件 已 介绍 完成 ， 大 家 对 每 个 文 
件 的 功能 、 内 容 应 该 都 有 了 一定 了 解 ， 在 本 章 最 后 一 节 中 ， 我 们 将 探讨 
小 程序 的 模块 化 。 


2.5 ”模块 化 








小 程序 逻辑 层 语言 是 JavaScript， 而 JavaScript 作 为 脚本 语言 在 设计 
初期 仅 是 为 了 实现 简单 的 页 面 交 互 ， 由 Brendan Eich 在 1995 年 花 了 不 到 
十 天 时 间 发 明 出 来 ， 语 言 本 身 缺 失 了 很 多 用 于 支撑 大 型 项 目的 设计 ， 而 
现在 前 端 业务 逻辑 越 来 越 复 杂 ， 代 码 也 越 来 越 多 ， 很 多 问题 就 暴露 出 
来 。 模 块 化 主要 解决 JavaScript 中 命名 冲突 和 文件 依赖 这 两 个 问题 ， 现 在 
模块 化 在 前 端 中 使 用 比较 广泛 ， 如 Nodejs、Requirejs、Seajs、Webpack 
等 ， 它 们 大 部 分 都 遵循 或 者 接近 CommonJS 规 范 ， 甚 至 ES6 也 针对 模块 
化 提出 了 自己 的 规范 。 目 前 前 端 模块 化 没有 一 个 统一 的 解决 方案 ， 在 不 
同 环境 、 不 同 框架 中 的 实现 都 不 一 样 ， 本 节 将 重点 讨论 小 程序 的 模块 化 


规范 。 





2.5.1 ”模块 化 简介 


最 早 前 端 JavaScript 代 码 量 不 大 ， 统 一 放 在 一 个 文件 内 ， 如 下 面 一 段 
代码 : 


Var name = 'weixin', 
age = : 


function getName() { 
// 实现 代码 


} 
function getAge() { 
// 实现 代码 


后 来 前 端 代码 越 来 越 多 ， 为 了 便于 管理 和 工作 拆 分 ， 我 们 不 得 不 把 
代码 拆 分 为 多 个 文件 ， 这 时 将 上 述 代 码 封闭 到 userjs 文 件 中 ， 需 要 用 时 
引入 页 面 《或 打包 到 一 个 文件 ) 就 行 。 初 期 团队 成 员 少 ， 一 切 都 运行 正 
常 ， 直 到 团队 越 来 越 大 ， 开 始 有 人 抱怨 : 我 想 定义 一 个 name 变 量 但 
user.js 中 已经 存在 ， 我 不 得 不 定义 为 myName; 为 什么 我 在 自己 代码 中 
定 了 getAge 方 法 就 导致 别人 代码 出 问题 了 呢 ? 通 过 这 种 文件 拆 分 的 工作 
我 们 只 是 对 代码 做 了 物理 上 的 分 离 ， 能 初步 实现 多 人 开发 和 简单 的 代码 
管理 ， 但 并 没有 真正 做 到 作用 域 的 隔离 ， 由 于 不 知道 其 他 文件 内 已 存在 
的 变量 名 ， 甚 至 让 全 局 冲突 问题 变 得 更 容易 、 更 严重 。 














再 后 来 为 了 避免 这 种 全 局 冲突 ， 大 家 决定 参考 Java 的 方式 ， 引 入 命 
名 空间 和 闭 包 来 解决 变量 冲突 问题 。 于 是 user.js 里 的 代码 变 成 了 如 下 这 


样 : 





( function() { 
myProject = myProject || 位 ; // 定义 全 局 命名 空间 
myProject.user = {}; 
myProject.user.name = 'weixin' 





var age = 12; // 闭 包 内 变量 ， 外 部 不 能 访问 





myProjecct.user.getName = function() { 
// 实现 代码 


myProject.user.getAge = function() { 
// 实现 代码 


} 
} )(0); 





这 样 别 的 同事 可 以 通过 myProject.user 获 取 name， 调 用 getName 和 
getAge 方 法 ， 通 过 命名 空间 ， 的 确 能 绥 解 大 部 分 冲突 ， 但 是 为 此 我 们 不 
得 不 记 住 很 长 一 串 命 名 空间 ， 同 时 当 我 使 用 user 这 个 空间 后 ， 别 人 就 不 
能 使 用 ， 这 也 不 能 完美 地 解决 问题 。 同 时 更 可 怕 的 是 如 果 user.js 依 赖 另 
外 一 个 utils.js， 别 的 同事 必须 通过 阅读 user.js 源 人 码 搞 惟 这 层 依赖 关系 ， 
按 顺 序 引 入 utils.js、user.js， 直 接 引 入 user.js 将 会 导致 他 代码 出 错 ， 如 果 
utils 还 依赖 别 的 资源 他 还 得 必须 搞 懂 相关 的 所 有 依赖 ， 而 他 仅仅 是 想 调 
de 这 对 调用 的 同事 来 说 无 颖 是 个 置 梦 。 这 时 我 们 需 

一 种 新 的 组 织 方 式 ， 于 是 诞生 了 模块 化 : 





-模块 是 一 段 JavaScript 代 码 ， 具 有 统一 的 基本 书写 格式 。 
-模块 之 间 通 过 基本 交互 规则 ， 能 彼此 引用 ， 协 同 工 作 。 


目前 模块 化 的 规范 不 统一 ， 大 致 可 分 为 CommonJS 和 ES6 两 种 规 


范 ， 大 家 有 兴趣 可 以 参考 网 上 相关 资料 ， 小 程序 模块 化 机 制 比较 接近 
CommonJS 规 范 ， 无 论 哪 种 规范 ， 学 习 起 来 都 十 分 简单 。 


2.5.2 ”文件 作用 域 





小 程序 中 一 个 JavaScript 文 件 就 是 一 个 模块 ， 在 这 个 文件 中 声明 的 变 
量 和 函数 只 在 该 文件 中 有 效 ， 不 同文 件 中 的 相同 变量 名 和 函数 名 是 不 会 
互相 影响 的 。 模 块 中 可 以 调用 一 些 全 局 的 方法 ， 如 下 例 中 通过 调用 
getApp 〈) 获取 小 程序 实例 : 

















App( { . 
myGlobalData : { /* 定义 全 局 属性 */ 
name : 'weixin' 
} 
} ); 
var myPrivatyData = "value1"; /* myPrivatyData 只 能 在 a.js 中 使 用 */ 


var appData = getApp(); 
appData.myGlobalData.name += ' app'; 












































var myPrivatyData = "value2"; /* myPrivatyData 不 会 和 a.js 中 同名 变量 冲突 */ 
var appData = getApp(); 
/* 当 a .js 在 b.js 前 执行 后 ， 这 里 会 输出 "weixin app value2" */ 

console.log( appData.myGlobalData.name + ' ' + myPrivatyData ); 


k 











2.5.3 ”模块 的 使 用 





模块 接口 的 暴露 和 引入 十 分 简单 : 
.通过 exports 暴 露 接口 。 


:通过 require (path) 引入 依赖 ，path 是 需要 引入 的 模块 文件 的 相对 
路 径 。 


示例 代码 如 下 : 





var privateData = 'weixin'; 


function run( who ) { 
console.log( who + ' run' ); 


function walk( who ) { 
console.log( who + ' walk' ); 


module.exports.run = run; 
exports.walk = walk; 


pe 
也 可 以 这 样 
module.exports = { 
run : run, 
walk : walk 


了 





*/ 
var otherMod = require( 'mod.js' ); /* */ 


Page( { 
onShow : function() { 
* 这 里 会 打印 出 somebody run */ 
otherMod.run( 'somebody' ); 
/* 这 里 会 打印 出 somebody walk */ 
otherMod.walk( 'somebody' ); 


























exports 是 module.exports 的 一 个 引用 ， 因 此 在 模块 里 面 随意 更 改 
exports 的 指向 会 造成 未 知 的 错误 。 所 以 我 们 更 推荐 开发 者 采用 
module.exports 来 又 露 模块 接口 ， 除 非 你 已 经 很 清晰 地 知道 这 两 者 的 关 
系 。 











.小 程序 目前 不 支持 直接 引入 node_modules， 开 发 者 需要 使 用 
node_ modules 时 建议 拷贝 出 相关 代码 到 小 程序 目录 中 。 





通过 模块 化 我 们 能 实现 代码 真正 的 隔离 ， 可 以 多 人 并 行 开发 ， 降 低 
大 型 项 目 管理 难度 ， 这 对 前 端 工 程 化 具有 很 大 促进 作用 。 








2.5.4 其 他 


1.JavaScript 运 行 环 境 


微 信 小 程序 逻辑 代码 运行 在 三 端 : i0S、Android 和 用 于 调试 的 开发 
者 工具 ， 这 三 端 是 各 自 不 同 的 三 个 解析 引擎 : 





:在 iOS 上 ， 小 程序 的 JavaScript 代 人 码 是 运行 在 JavaScriptCore 中 。 
:在 Android 上， 小 程序 的 JavaScript 代 人 码 是 通过 X5 内 核 来 解析 。 


:在 开发 工具 上 ， 小 程序 的 JavaScript 代 码 是 运行 在 nwjs (chrome 内 
核 ) 中 。 


虽然 尽管 三 端的 环境 十 分 相似 ， 但 是 至 少 在 目前 对 一 些 语法 、 特 性 
的 支持 还 是 有 一 些 区 别 ， 在 开发 过 程 中 要 尽 可 能 地 在 三 端 进行 测试 。 





2.ES6 语 法 以 及 API 支 持 


在 小 程序 中 ， 开 发 者 可 以 使 用 ES6 语 法 进行 编码 ， 在 0.10.101000 以 
及 之 后 版 本 的 开发 工具 中 ， 会 默认 使 用 babel 将 开发 者 ES6 代 码 转 换 为 三 
端 都 能 很 好 支持 的 ES5 的 代码 ， 帮 助 开 发 者 解决 环境 不 同 所 带 来 的 开发 
问题 。 如 果 没 有 使 用 ES6 语 法 ， 开 发 者 可 以 在 项 目 设 置 中 关闭 这 个 功 





后 忆 
月 上 。 





转化 过 程 中 需要 注意 : 


.这 种 转换 只 会 帮助 开发 者 处 理 语法 上 问题 ， 新 的 ES6 的 API， 例 如 
Promise 等 需要 开发 者 自行 引入 Polyfill 或 者 别 的 类 库 。 





.为 了 提高 代码 质量 ， 在 开启 ES6 转 换 功 能 的 情况 下 ， 默 认 局 用 
JavaScript 严 格 模式 ， 请 参考 “use strict”。 


2.6 小结 





小 程序 框架 是 小 程序 开发 的 核心 ， 本 章 重 点 讲解 了 框架 的 大 致 原 
理 、 规 范 ， 痢 析 了 所 涉及 的 每 个 文件 ， 小 程序 这 种 基于 数据 的 编码 方式 
和 前 端 基于 DOM 的 编码 方式 有 很 大 不 同 ， 大 家 要 着 章 了 解 熟悉 ， 了 解 
小 程序 运行 原理 后 ， 后 续 学 习 组 件 和 API 将 会 非常 简单 。 











第 3 章 ”布局 





WXSS 实 现 了 CSS 布 局 相关 的 大 部 分 规范 ， 但 在 一 些 细 市 上 有 差 
异 ， 甚 至 同样 的 语法 在 小 程序 调试 工具 和 微 信 中 的 表现 也 存在 差异 。 本 
革 主 要 讲述 CSS 布 局 相关 的 一 些 基 本 知识 ， 包 括 经 典 的 盒子 模型 、 浮 动 
定位 、 绝 对 定位 以 及 近 几 年 提出 的 Flex 布 局 。 这 些 基本 知识 在 WXSS 也 
征 通 用 的 。 对 于 其 他 一 些 特 性 ， 开 发 者 可 在 开发 过 程 中 答 试 ， 如 果 大 家 
想 对 CSS 有 更 深 的 了 解 可 以 参考 网 络 资料 或 《CSS 权 威 指南 》。 这 里 再 
众 提 醒 大 家 ， 在 代码 编写 过 程 中 一 定 要 开局 开发 者 工具 中 的 这 个 功 
能 :“ 开 局 上 传代 码 时 样式 文件 上 自动 补 全 ”， 人 否则 在 学 习 本 章 Flex 布 局 时 


会 存在 不 同 终端 兼容 性 问题 。 




















(ed 











3.1 基本 知识 


3.1.1 ”盒子 模型 





盒子 模型 是 CSS 布 局 的 基础 ，CSS 假 定 每 个 元 素 都 会 生成 一 个 或 多 
个 矩形 框 ， 每 个 元 素 框 中 心 都 有 一 个 内 容 区 〈content) ， 这 个 内 容 区 周 
围 有 内 边 距 〈padding) 、 边 框 (border) 和 外 边 距 (margin) ， 这 些 项 
默认 宽度 为 0， 这 个 定形 框 就 是 常 说 的 盒子 模型 ， 如 图 3-1 所 示 。 





简单 来 说 ，HIML 中 每 一 个 元 素 就 是 一 个 盒子 ， 同 理 ， 在 小 程序 中 
每 一 个 组 件 就 是 个 合子， 元 素 的 宽度 、 高 度 就 是 内 容 区 域 宽 度 、 高 度 ， 
不 包含 内 边 距 、 边 框 和 外 边 距 ， 我 们 可 以 通过 元 素 width、height、 
padding、border、margin 属 性 控制 盒子 样式 。 盒 子 模型 根据 浏览 器 具体 
实现 可 分 为 W3C 的 标准 盒子 模型 和 IE 盒子 模型 ， 这 两 种 盒子 模型 在 宽度 
和 高 度 的 计算 上 不 一 致 ， 正 盒子 模型 的 宽度 和 高 度 是 包含 内 边 距 和 边框 
的 ， 我 们 这 里 讲述 的 主要 是 W3C 的 盒子 模型 ，WXSS 完 全 遵守 W3C 人 久子 


模型 规范 。 
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图 3-1 盒子 模型 

















CSS 中 的 布局 都 是 基于 盒子 模型 ， 不 同类 型 元 系 对 盒子 模型 的 处 理 
也 是 不 同 的 ， 块 级 元 素 的 处 理 束 和 行内 元 素 人 不同， 浮动 元 素 和 定位 元 素 
的 处 理 也 是 不 相同 的 ， 接 下 来 我 们 逐一 讨论 这 些 差 寞 。 











3.1.2” 块 级 元 素 











元 素 按 显示 方式 主要 可 以 分 为 块 级 元 素 和 行内 元 素 ， 元 素 的 显示 方 
式 是 由 display 属 性 控制 的 ， 块 级 元 素 会 默认 占 一 行 高 度 ， 一 般 一 行内 只 
有 一 个 块 级 元 素 《〈 浮 动 后 除外 ) ， 当 再 添加 新 的 块 级 元 素 时 ， 新 元 素 会 
自动 换行 显示 。 块 级 元 素 一 般 作 为 容器 出 现 ， 用 于 组 织 结构 。 一 些 元 素 
默认 就 是 块 级 元 素 ， 如 小 程序 中 的 <view/> 组 件 ， 而 一 些 则 默认 是 行内 
元 素 ， 我 们 可 以 通过 修改 元 素 display 属 性 为 block， 将 一 个 元 素 强制 设置 
为 块 级 元 素 。 一 个 块 级 元 系 的 元 系 框 与 其 父 元 素 的 width 相同 ， 块 级 元 
素 的 width+marginLeft+tmarginRight+paddingLeft+paddingRight 刚 好 等 于 
父 级 元 素 内 容 区 宽度 ， 显 示 时 默认 撑 满 父 元 素 内 容 区 。 块 级 元 素 高 度 由 
其 子 元 系 决 定 ， 父 级 元 素 高 度 会 随 内 容 元 素 变 化 而 变化 。 块 级 元 素 特点 
总 络 如 下 : 

















' 总 是 在 新 行 上 开始 。 


width+marginLeft+tmarginRight+paddingLeft+paddingRight 刚 好 等 于 父 级 
元 素 内 容 区 宽度 ， 除 非 设 定 一 个 新 宽度 ， 这 里 需要 注意 ， 当 设置 块 级 元 
素 宽度 为 100% 时 ， 如 采 当 前 块 级 元 素 存在 padding、margin 会 导致 块 级 
元 素 洲 出 父 元 素 。 





盒子 模型 高 度 默 认 由 内 容 决 定 。 


盒子 模型 中 高 度 、 宽 度 及 外 边 距 和 内 边 距 都 可 控制 。 








.可 以 容纳 行内 元 素 和 其 他 块 级 元 素 。 


示例 : 


<view/> 组 件 默 认 是 块 级 元 素 ， 下 面 我 们 使 用 <view/> 为 大 家 演示 块 
级 元 素 的 特性 ， 如 图 3-2 所 示 。 
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图 3-2 ” 块 级 元 系 示 例 


代码 如 下 : 














<!-- 每 个 块 级 元 素 占领 一 行 - -> 
<view style="border:solid 1px;"> 第 一 个 块 级 元 素 </view> 


<!-- 默认 情况 下 块 级 元 素 的 元 素 框 和 父 级 元 素 的 width 相同 ， 刚 好 撑 满 内 容 区 - -> 
<view style="border:solid 10px; margin : 10px; padding :10px;"> 第 二 个 块 级 元 素 
</view> 


<! 窜 - 光 即使 宽度 不 足 ， 仍 会 占领 行 让 二 余 元 素 换行 - -> 四 
<view style="border:solid 1px; width : 200px;"> 第 三 个 块 级 元 素 </view> 
其 他 信息 












































<1-- 父 级 元 素 高 度 随 内 容 决 定 内 容 为 块 级 元 素 - -> 

<view style="margin-top:10px; border:solid 1px;"> 
<view style="height : 100px;"> 块 级 元 素 </view> 

</view> 


<1-- 父 级 元 素 高 度 随 内 容 决 定 内 容 为 文本 流 情况 - -> 
<view style="margin-top:10px; border:solid 1ipx;"> 


</view> 

















块 级 元 素 还 有 很 多 特性 ， 比 如 水 平 格式 化 、 垂 直 格 式 化 等 ， 我 们 不 
在 这 里 一 一 列举 ， 大 家 可 以 查阅 相关 资料 。 


3.1.3 ”行内 元 素 





除了 块 级 元 素 ， 最 音 见 的 就 是 行内 元 素 ， 通 过 设置 display 属 性 为 
inline 可 以 将 一 个 元 素 设 置 为 行内 元 素 ， 小 程序 中 <text/> 束 是 一 个 行内 组 
件 。 行 内 元 素 没 有 块 级 元 系 那 么 简单 直接 ， 块 级 元 素 只 是 生成 框 ， 通 党 
不 允许 其 他 内 容 与 这 些 框 并 存 ， 行 内 元 素 特 点 忌 结 如 下 : 








“和 其 他 非 块 级 元 系 痢 在 一 行 上 。 


.盒子 模型 中 高 度 、 宽 度 、 上 下 margin、 上 下 padding 设 置 均 无 效 ， 
只 能 设置 左右 margin 和 左右 padding。 





宽度 就 是 文字 或 图 片 的 宽度 ， 不 可 改变 。 
:行内 元 素 宽 度 、 高 度 都 不 能 直接 设置 。 


“行内 元 素 只 能 容纳 文本 或 其 他 行内 元 系 ， 在 行内 元 素 中 放置 块 级 
元 素 会 引起 不 必要 的 混乱 。 











如 图 3-3 中 的 示例 ， 大 家 可 以 对 比 本 例 中 块 级 元 素 和 行内 元 素 的 区 
别 ， 我 们 设置 了 行内 元 素 的 margin， 布 局 时 上 下 margin 都 被 忽略 了 。 本 
例 中 我 们 将 上 下 padding 设 置 为 0， 大 家 可 以 尝试 设置 为 其 他 值 ， 这 时 会 
发 现 上 下 padding 会 生效 ， 但 古 不 会 影响 布局 ， 本 例 中 行内 元 系 换 行 是 








因为 上 面 的 块 级 元 际 强 制 占 位 一 行 。 
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图 3-3 ”行内 元 系 示 例 


本 例 的 代码 如 下 : 





<!-- 块 级 元 素 --> 
<view style="border:solid 1px #999; color : #999; "> 我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 素 我 


<!-- 通过 修改 display 属 性 的 行内 元 素 - -> 
前 面 的 文字 <view style="border:solid 1ipx; margin:10px; padding : 9 10px; display: inli 









































3.1.4 行内 块 元 素 





行内 块 元 素 是 块 级 元 系 和 行内 元 系 的 混合 物 ， 当 display 属 性 为 
inline-block 时 ， 元 素 吕 被 设置 为 一 个 行内 块 元 系 ， 行 内 块 元 素 可 以 设置 
宽 、 局 、 内 边 距 和 外 边 距 ， 可 以 简单 认为 行内 块 元 素 是 把 块 级 元 素 以 行 
的 形式 展现 ， 保 留 了 块 级 元 素 对 宽 、 高 、 内 边 距 、 外 边 距 的 设置 ， 它 就 
像 一 张 图 一 样 放 在 一 个 文本 行 中 ， 如 图 3-4 所 示 。 





动作 ”帮助 微 信 开 发 者 工具 0.11.112301 一 口 X 


iPhone 4 i v [x Console 
© top 


> 


前 惫 的 又 字 


我 是 块 级 元 素 我 是 块 级 元 素 我 是 块 级 元 
素 我 是 块 级 元 素 我 是 块 级 元 素 


后 面 的 文字 前 面 的 文字 
元 素 | 后 面 的 文字 后 面 的 文字 
后 面 的 文字 





Console 





图 3-4 ”行内 块 元 素 示例 


代码 如 下 : 

















<!- - 行内 块 元 素 宽度 撑 满 父 级 宽度 情况 - -> 
前 面 的 文字 <view style="border:solid 1ipx; margin:10px; padding : 10px; display:inline-| 
<1-- 行内 块 元 素 宽 度 不 足 父 级 宽度 情况 --> 
前 面 的 文字 <view style="border:solid 1px; margin: 10px; padding : 10px; display: inlin， 



































5 浮动 和 是 位 





了 解 基本 盒子 模型 后 ， 本 小 市 开始 讲解 定位 相关 的 内 容 ， 定 位 的 基 
本 思想 很 简单 ， 它 允许 你 定义 元 素 框 相对 于 其 正常 位 置 应 该 出 现在 哪 ， 
或 者 相对 于 父 元 素 、 男 一 个 元 素 甚至 浏览 器 窗口 本 里 的 位 置 。 浮 动 和 定 
位 是 我 们 常用 的 布局 方案 ，WXSS 也 支持 Flex 布 局 方案 ， 接 下 来 我 们 将 
对 这 三 种 布局 方案 一 一 讲解 。 




















了 











浮动 不 完全 是 定位 ， 同 时 它 也 不 是 正常 流 布局 ， 通 过 设置 float 属 
性 ， 浮 动 的 框 可 以 向 左 或 者 问 右 移动 ， 下 到 其 外 边缘 磁 到 包含 框 或 为 一 
个 浮动 框 的 边框 为 止 。 由 于 浮动 框 不 在 文档 的 普通 流 中 ， 文 档 的 普通 流 
中 的 会 表现 的 浮动 框 不 存在 一 样 ， 其 他 内 容 会 环绕 过 去 ， 如 图 3-5 所 





作 \。 
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图 3-5 ”浮动 示例 


代码 如 下 : 





<view> 

文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 文本 <view 
style="display:block;float:left;border:solid 1px;margin : 20px;"> 浮 动 框 </view> 文 本 文本 
</view> 














上 例 中 浮动 区 域 在 它 当 前 的 位 置 往 左 浮动 ， 直 人 至 父 元 素 内 容 框 ， 


他 文本 都 环绕 而 过 。 由 于 元 系 浮 动 时 不 在 普通 流 中 ， 这 会 导致 父 级 元 素 
忽略 浮动 元 素 局 度 ， 形 成 坪 塌 ， 如 图 3-6 所 示 。 


代码 如 下 : 








<1-- 父 级 元 素 高 度 只 会 包含 第 一 元 素 忽略 浮动 元 素 - -> 
<view style="border:solid 1pXx; "> 
<view> 其 他 元 素 </view> 
<view style="float:1left;"> 浮 动 框 </view> 
</view> 
本 例 中 父 级 元 素 的 边框 并 没有 包 襄 浮动 框 ， 虽 然 这 是 浮动 的 一 个 特 









































本 例 中 父 级 元 系 的 边框 并 没有 包 衷 浮动 框 ， 虽 然 这 是 浮动 的 一 个 特 
性 ， 并 不 是 一 个 bug， 但 在 某 些 情况 下 我 们 仍然 希望 在 使 用 浮动 的 同 
时 ， 父 级 元 素 的 高 度 能 包 庄 浮动 元 素 ， 这 时 我 们 就 需要 了 解 和 浮动 的 兄 
一 个 属性 : clear《〈 清 除 ) 。 当 设置 元 系 clear 时 ， 可 以 确保 当前 元 素 的 左 
边 、 右 边 或 左右 两 边 同 时 不 能 出 现 译 动 的 元 素 ， 如 图 3-7 所 示 。 
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图 3-6 浮动 高 度 问题 示例 
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图 3-7 清除 浮动 示例 


代码 如 下 : 











<1!-- 父 元 素 会 包含 清除 浮动 元 素 - -> 
<view style="border:solid 1px;"> 

<view> 其 他 元 素 </view> 

<view style="float :left;"> 浮 动 框 </view> 

<!-- 设置 当前 元 素 左 边 不 能 出 现 浮动 元 素 - -> 

<View style="clear :left;"> 清 除 浮 动 元 素 </view> 
</view> 























<view style="border:solid 1px; margin-top:10px;"> 
<view> 其 他 元 素 </view> 
<view style="float :left;"> 浮 动 框 </view> 
<view> 不 清除 浮动 </view> 

</view> 

















5 





在 上 例 中 有 个 特别 有 意思 的 现象 ， 父 元 素 虽 然 会 忽略 浮动 元 系 〈 如 
浮动 局 度 示例 中 产生 的 地 塌 ) ， 但 是 不 会 忽略 其 他 元 素 〈 包 括 清除 浮动 
的 元 系 ) ， 而 清除 浮动 的 元 素 忆 在 浮动 元 素 下 方 ， 所 以 在 显示 时 视觉 上 
父 元 素 束 把 所 有 元 素 都 包含 进去 了 ， 如 上 例 中 无 论 非 浮 动 元 系 在 哪里 ， 
父 元 系 边 框 都 包含 了 非 浮 动 元 素 。 利 用 这 个 特性 ， 如 果 把 上 例 中 清除 浮 
动 的 高 度 置 为 0 使 其 看 不 见 ， 这 时 父 元 素 仍然 会 包 庄 它 ， 这 样 就 能 防止 
浮动 元 素 父 元 系 忆 上 度 雨 塌 ， 网 上 利用 after 伪 属性 清除 浮动 就 是 这 个 原 


理 。 这 里 我 们 对 比 使 用 元 系 和 after 伪 属性 2 种 实现 方案 ， 如 图 3-8 所 示 。 
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图 3-8 清除 浮动 应 用 示例 


WXML 文 件 的 代码 如 下 : 








<!-- 添加 高 度 为 9 的 元 素 清除 浮动 - -> 
<view style="border:solid 1px;"> 
<view> 其 他 元 素 </view> 
<view style="float :left;"> 浮 动 框 </view> 
<view style="clear:both;height:0;"></view> 
</view> 


<!-- 利用 伪 属 性 在 后 面 插 入 一 个 元 素 清除 浮动 - -> 

<view style="border:solid 1px; margin-top:10px;" class="clearfix"> 
<view> 其 他 元 素 </view> 
<view style="float :left;"> 浮 动 框 </view> 

</view> 


<!-- 不 清除 浮动 对 比 - -> 
<view style="border:solid 1px; margin-top:10px;"> 
<view> 其 他 元 素 </view> 
<view style="float :left;"> 浮 动 框 </view> 
</view> 



















































































.WXSS 文 件 的 代码 如 下 : 








/* 一 定 要 设置 content， 否 则 元 素 不 会 显示 */ 
.Clearfix:after { display:block; height : 0; clear : both; content : '' } 








在 实际 项 目 中 ,为 了 复 用 性 和 便捷 性 ， 我 们 通常 使 用 .clearfix 类 清 
除 浮动 。 


3.22 定位 


元 素 的 定位 由 position 属 性 控制 ，position 有 4 种 不 同类 型 的 定位 ， 会 
影响 元 素 框 生成 的 方法 : 


static: 元 又 框 正 常生 成 。 块 级 元 素 生 成 一 个 矩形 框 ， 作 为 文档 流 
的 一 部 分 ， 行 内 元 素 则 会 创建 一 个 或 多 个 行 框 ， 置 于 其 父 元 素 中 ，static 
是 position 的 默认 值 。 








relative: 元 素 框 偏 移 某 个 距离 。 元 素 仍 保 持 其 未 定位 前 的 形状 ， 
它 原 本 所 占 的 空间 仍 保留 。 


“absolute: 元 素 框 从 文档 流 中 完全 删除 ， 并 相对 于 其 包含 块 定位 ， 
包含 块 可 能 是 文档 中 的 另 一 个 元 素 或 者 是 初始 包含 块 。 对 于 absolute 来 
说 ， 包 含 块 是 离 当 前 元 素 最 近 的 position 为 absolute 或 relative 的 父 元 素 ， 
如 果 父 元 素 中 没有 任何 absolute 或 relative 布 局 的 元 素 ， 那 么 包含 块 就 是 
根 元 素 。 使 用 position 布 局 后 ， 元 素 原 先 在 正常 文档 流 中 所 占用 的 空间 
会 关闭 ， 就 好 像 该 元 素 原来 不 存在 一 样 。 元 素 定位 后 生成 一 个 块 级 框 ， 
不 论 原来 它 在 正常 流 中 生成 何 种 类 型 的 杠 。 

















-fixed: 元 素 框 的 表现 类 似 于 将 position 设 置 为 absolute， 不 过 其 包含 


示例 如 图 3-9 所 示 。 
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图 3-9 ”position 属 性 示例 


代码 如 下 : 





<!-- relative 相 对 之 前 位 置 进行 移动 ， 原 占有 空间 不 会 被 关闭 --> 
<view style="border:solid 1px;"> 
文案 文案 <text style="position:relative; top : 10px; left : 10px;">relative</text> 


</view> 


<!-- absolute 依赖 于 包含 块 ， 原 占 




















空间 会 被 关闭 --> 


<view style="border:solid 1px; position:relative; height : 80px;"> 


文案 文案 <text style="position:absolute;left : 10px; bottom : 10px;">absolute</tex 
</view> 

















<!-- 没有 找到 最 近 的 absolute 或 relative 元 素 会 直接 认为 根 元 素 是 包含 块 ， 原 占有 空间 会 关闭 --> 
<view style="border:solid 1px;"> 

文案 文案 <text style="position:absolute;left : 10px; bottom : 10px;">absolute 不 设 
</view> 


<1-- fixed 直 接 认 为 视窗 本 身 为 包含 块 ， 原 占有 空间 会 关闭 - -> 
<view style="border:solid 1px;"> 

文案 文案 <text style="position:fixed;right : 10px; bottom : 30px;border:solid 1px; 
</view> 




































































二 一 


3.3 ”Flex 布 局 














浮动 和 定位 是 基于 盒子 模型 的 传统 布局 解决 方案 ， 它 在 处 理 一 些 特 
殊 布局 时 非常 不 方便 ， 比 如 垂直 居中 ，2009 年 W3C 提 出 了 一 种 新 的 方案 
Flex 布 局 ， 该 布局 可 以 简单 快速 地 完成 各 种 伸缩 性 的 设计 。Flex 是 
Flexible Box 的 缩写 ， 即 为 弹性 盒子 布局 ， 可 以 为 传统 盒子 模型 带 来 更 大 
的 灵活 性 ， 目 前 主流 浏览 器 都 支持 这 种 布局 ， 小 程序 WXSS 也 对 其 进行 
了 实现 ， 项 目 中 可 以 随意 使 用 。 








3.3.1 基本 概念 


Flex 布 局 主要 由 容器 和 项 目 构成 ， 采 用 Flex 布 局 的 元 素 ， 称 为 Flex 
容器 (flex container) ， 它 的 所 有 直接 子 元 素 自 动 成 为 容器 成 员 ， 称 为 
Flex 项 目 (flex item ) 。 可 以 设置 display: flex 或 display: inline-flex 将 任 
何 一 个 元 素 指定 为 Flex 布 局 ， 如 图 3-10 所 示 ， 容 器 默认 存在 两 根 轴 ， 水 
平 的 主轴 (main axis) 和 垂直 的 交叉 轴 〈cross axis) ， 主 轴 开 始 的 位 置 

(及 主轴 与 边框 的 交叉 点 ) 叫 main start， 结 束 的 位 置 叫 main end，main 
start 和 main end 和 主轴 的 方向 有 关 ; 交叉 轴 开 始 的 位 置 叫 cross start， 结 
束 的 位 置 叫 cross end，cross start 和 cross end 和 交叉 轴 方 向 有 关 。 项 目 默 
认 沿 主轴 从 主轴 开始 的 位 置 到 主轴 结束 的 位 置 进行 排列 ， 项 目 在 主轴 上 
占据 的 空间 叫 main size， 在 交叉 轴 上 占据 的 空间 叫 cross size。 
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图 3-10 ”Flex 布 局 模型 


3.3.2 ”容器 属性 


容 句 文 持 的 属性 有 : 





display: 通过 设置 display 属 性 ， 指 定 元 素 是 否 为 Flex 布 局 。 
-flex-direction: 指定 主轴 方向 ， 决 定 了 项 目的 排列 方式 。 
-flex-wrap: 排列 换行 设置 。 


.flex-flow: flex-direction 和 fex-wrap 的 简写 形式 。 





justify-content: 定义 项 目 在 主轴 上 的 对 齐 方式 。 
"align-items: 定义 项 目 在 交叉 轴 上 的 对 齐 方式 。 


"align-content: 定义 多 根 轴线 的 对 齐 方式 ， 如 果 只 有 一 根 轴线 ， 访 
属性 不 起 作用 。 


1.display 


display 用 来 指定 该 元 素 是 否 为 Flex 布 局 ， 语 法 为 : 





.mybox{ display: flex | inline-flex; } 





其 属性 值 如 下 : 


.flex: 用 于 产生 块 级 Flex 布 局 。 


dp 


“inline-flex: 用 于 产生 行内 Flex 布 局 ， 行 内 容器 符合 行内 元 素 的 特 
同时 在 容器 内 又 符合 Flex 布 局 规范 。 


设置 Flex 布 局 以 后 ， 子 元 素 的 float、clear 和 vertical-align 属 性 将 会 失 


2.flex-direction 


flex-direction 用 于 指定 主轴 的 方向 ， 即 项 目 排列 的 方向 ， 语 法 为 : 





.mybox{ flex-direction : row | row-reverse | colum | colum-reverse; } 





它 有 4 个 值 ( 如 图 3-11) : 

Tow: 主轴 为 水 平方 向 ， 起 点 在 左 端 ， 默 认 值 。 
-TOW-reverse: 主轴 为 水 平方 向 ， 起 点 在 右 端 。 
:colum: 主轴 为 垂直 方向 ， 起 点 在 上 党 。 


colum-reverse: 主轴 为 垂直 方向 ， 起 点 在 下 沿 。 


TIOW-IeVelSe 





图 3-11 flex-direction 示 例 
3.flex-wrap 


默认 情况 下 ， 项 目 都 排 在 一 条 线 上 ，flex-wrap 用 来 指定 如 果 一 条 轴 
线 排 不 下 ， 该 如 何 换行 。 





.mybox{ flex-wrap : nowrap | wrap | wrap-reverse; } 





它 有 3 个 值 〈 如 图 3-12 所 示 ) : 


nowrap flex-end 





图 3-12 ”flex-wrap 示 例 
nowrap: 不 换行 ， 默 认 值 。 
wrap: 换行 ， 第 一 行 在 上 方 。 


wrap-reverse: 换行 ， 第 一 行 在 下 方 。 





当 设 置换 行 时 ， 还 需要 设置 align-item 属 性 配合 实现 自动 换行 ， 并 且 


align-item 的 值 不 能 为 “stretch”。 


4.flex-flow 


flex-flow 是 flex-direction 和 flex-wrap 的 简写 形式 ， 默 认 值 为 row 
nowrap。 语 法 如 下 : 





.mybox{ flex-flow : <flex-direction> || <flex-wrap>; } 





示例 代码 如 下 : 





.mybox{ flex-flow : row-reverse wrap; } 

.mybox{ flex-flow : wrap row-reverse; } /* 和 上 一 句 效果 一 样 */ 
.mybox{ flex-flow : row-reverse; } 

.mybox{ flex-flow : wrap; } 











5.justify-content 


justify-content 属 性 定义 了 项 目 在 主轴 上 的 对 齐 方式 ， 语 法 如 下 : 





.mybox{ justify-content : flex-start | flex-end | center | space-between | space-arc 








justify-content 与 主轴 方向 有 关 ， 包 括 以 下 属性 (默认 主轴 从 左 到 
右 ， 如 图 3-13 所 示 ) : 


:flex-start: 左 对 齐 ， 默 认 值 。 
:flex-end: 右 对 齐 。 


:center: 居中 。 





.Space-between: 两 端 对 齐 ， 项目 之 间 的 间隔 都 相等 。 





“space-around: 每 个 项 目 两 侧 的 间隔 相等 。 所 以 ， 项 目 之 间 的 间隔 
比 项 目 与 边框 的 间隔 大 一 倍 。 


6.align-items 


align-items 指 定 项 目 在 交叉 轴 上 如 何 对 齐 ， 语 法 如 下 : 





.mybox{ align-items : flex-start | flex-end | center | baseline | stretch; } 





algin-items 与 交 义 轴 方 回 有 关 ， 包 括 以 下 属性 (假设 交 义 轴 从 上 到 
下 ， 如 图 3-14 所 示 ) : 


.flex-start:; 交叉 轴 的 起 点 对 齐 。 
:flex-end: 区 又 轴 的 终点 对 齐 。 


center: 交叉 轴 的 中 线 对 齐 。 


flex-start flex-end 


| 


center space-between 


请 上 | 


space-around 





图 3-13 ”justify-content 示 例 








baseline: 项 目 根据 它们 第 一 行文 字 的 基线 对 齐 。 





“stretch: 如 果 项 目 未 设置 高 度 或 设置 为 auto， 项 目 将 在 交叉 轴 方 向 
拉 伸 填充 整个 容器 ， 默 认 值 。 


7.align-content 


align-content 用 来 定义 项 目 多 根 轴线 《出 现 换行 后 ) 在 交叉 轴 上 的 
对 齐 方 式 ， 如 果 项 目 只 有 一 根 轴线 ， 该 属性 不 起 作用 ， 语 法 如 下 : 





.mybox{ align-content : flex-start | flex-end | center | space-between | space-arour 





其 属性 值 如 下 《〈 如 图 3-15) : 

flex-start: 与 交叉 轴 的 起 点 对 齐 。 

-flex-end: 与 交叉 轴 的 终点 对 齐 。 

center: 与 交叉 轴 的 中 点 对 齐 。 

space-between: 与 交叉 轴 两 端 对 齐 ， 轴 线 之 间 的 间隔 平均 分 布 。 


.Space-around: 每 根 轴线 两 侧 的 间隔 都 相等 ， 轴 线 之 间 的 间隔 比 轴 
线 与 边框 间隔 大 一 倍 。 


“stretch: 轴线 占 满 整个 交叉 轴 ， 每 个 项 目 会 被 拉 伸 直 至 填 满 交 叉 
轴 ， 默 认 值 。 


flex-start flex-end 


center stretch 


baseline 





图 3-14 align-items 示 例 


3.3.3 项目 属性 


项 目 文 持 的 属性 有 6 个 : 
:order: 定义 项 目的 排序 顺序 。 
-flex-grow: 定义 项 目的 放大 比例 。 


:flex-shrink: 定义 项 目的 缩小 比例 。 








flex-basis: 定义 在 分 配 多 余 空间 之 前 ， 项 目 占据 的 主轴 空间 


(main size) 。 


flex: flex-grow、flex-shrink 和 flex-basis 的 简写 。 


align-self: 用 来 设置 单独 的 伸缩 项 目 在 交叉 轴 上 的 对 齐 方式 ， 可 懂 
盖 默 认 的 algin-items 属 性 。 


1.order 


order 属 性 定义 项 目的 排列 顺序 。 数 值 越 小 ， 排 列 越 靠 前 〈 如 图 3- 
16) ， 默 认为 0， 语 法 如 下 : 





.myitem{ order : <integer>; } 








图 3-15 ”align-content 示 例 


示例 1 示例 2 





图 3-16” order 示例 


2.flex-grow 


flex-grow 定 义 项 目的 放大 比例 ， 默 认为 0， 即 如 果 存 在 剩余 空间 ， 
也 不 放大 ， 语 法 如 下 : 





.myitem{ flex-grow : <number>; } 





如 果 所 有 项 目的 flex-grow 值 都 为 1， 则 它们 将 等 分 剩余 空间 (如 果 
有 的 话 ) 。 如 果 一 个 项 目的 flex-grow 属 性 为 2， 其 他 项 目 都 为 1， 则 前 者 


占据 的 剩余 空间 将 比 其 他 项 多 一 倍 ， 整 体 按 比 例 填充 剩余 空间 ， 如 图 3- 


17 所 示 。 


年 比 例 放 大 按 比 例 放大 


图 3-17 ”flex-grow 示 例 

















3.flex-shrink 


flex-shrink 定 义 了 项 目的 缩小 比例 ， 默 认为 1， 如 采 空 间 不 足 ， 该 项 
目 将 缩小 ， 语 法 如 下 : 





.myitem{ flex-shrink : <number>; } 





如 果 所 有 项 目的 flex-shrink 属 性 都 为 1， 当 空间 不 足 时 ， 都 将 等 比 缩 
小 。 如 果 一 个 项 目的 flex-shrink 属 性 为 0， 其 他 项 目 都 为 1， 则 空间 不 足 
时 ， 前 者 不 缩小 ， 负 值 对 该 属性 无 效 。 这 个 属性 大 多 数 资 料 都 没有 细 
讲 ， 这 里 我 们 举 个 例子 〈 如 图 3-18) ， 如 一 个 容器 宽 200px， 里 面 有 4 个 
项 目 ， 它 们 的 宽度 都 为 60px， 那 么 整体 宽度 就 是 4x60=240px， 比 容器 多 
了 40px， 如 果 这 4 个 项 目的 flex-shrink 值 分 别 为 1、2、1、3， 那 么 它们 的 


宽度 分 别 按 比 例 减少 40pxx1/ (1+2+1+4) =5px、40pxx2/ (1+2+1+4) 
=10px、40pxx1/ (1+2+1+4) =5px、40pxx4/(1+2+1+4) =20pX， 缩 小 
后 它们 的 宽度 分 别 为 : 55px、50px、55px、40px。 


4.flex-basis 


flex-basis 属 性 用 来 定义 伸缩 项 目的 基准 值 ， 剩 余 的 空间 将 按 比 例 进 
行 缩放 。 它 的 默认 值 为 aato， 即 项 目的 本 来 大 小 ， 语 法 如 下 : 





.myitem{ flex-basis : <length> | auto; } 





它 可 以 设 为 跟 width 或 height 属 性 一 样 的 固定 值 ， 如 320px， 这 样 项 
目 将 占据 固定 空间 





缩小 前 布局 


60px 60px 60px 60px 


等 比例 缩小 按 比例 缩小 


上 50px -二 50px 二 50px -| 50px -了 上 -55px 一 | 50px 二 -5Spx 一 | 上 40px] 
图 3-18 ”flex-shrink 示 例 





5.flex 


flex 属 性 是 flex-grow、flex-shrink 和 flex-basis 的 人 简写， 默认 值 为 01 
auto。 后 两 个 属性 可 选 ， 语 法 如 下 : 





.myitem{ none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 





该 属性 有 两 个 快捷 值 : auto (11 auto) 和 none (00 auto) 。 


建议 优先 使 用 这 个 属性 ， 而 不 是 单独 写 三 个 分 离 的 属性 ， 因 为 浏览 
器 会 推算 相关 值 。 


示例 代码 如 下 : 





.myitem{ flex: 1 1 auto } 

.myitem{ flex : auto; } /* 同上 名 */ 
.myitem{ flex: 0 0 auto } 
.myitem{ flex : none; } /* 同上 名 */ 
.myitem{ flex : 1 auto; } 

.myitem{ flex : 1 1; } 




















6.align-self 


align-self 用 来 设置 单独 的 伸缩 项 目 在 交叉 轴 上 的 对 齐 方式 ， 该 属性 
会 复写 默认 的 对 齐 方式 ， 语 法 如 下 : 





.myitem{ align-self : auto | flex-start | flex-end | center | baseline | stretch,; } 





该 属性 6 个 值 除 了 auto， 其 余 和 容器 align-items 属 性 完全 一 致 : 





auto: 表示 继承 容器 align-items 属 性 ， 如 果 没 有 父 元 素 ， 则 等 同 于 
stretch， 默 认 值 。 


.flex-start: 交叉 轴 的 起 点 对 齐 ， 如 图 3-19 所 示 。 


:flex-end: 区 又 轴 的 终点 对 齐 。 


center: 交叉 轴 的 中 线 对 齐 。 





"baseline: 项 目 根 据 它 们 第 一 行文 字 的 基线 对 齐 。 





“stretch: 如 果 项 目 未 设置 高 度 或 设置 为 auto， 项 目 将 在 交叉 轴 方 向 
拉 伸 填充 整个 容器 ， 默 认 值 。 


align-self 举例 


flex-end 





图 3-19 align-self 示 例 


Sd 小 全 








布局 是 构建 页 面 的 基础 ， 如 果 使 用 时 不 小 心 也 会 产生 一 些 意料 之 外 
的 问题 。 在 使 用 布局 时 ， 需 要 在 合适 的 场景 使 用 合适 的 定位 技术 ， 对 元 
素 的 定位 、 重 合 、 合 放 顺 序 、 大 小 和 放置 等 都 要 仔细 考虑 。 如 果 使 用 浮 
动 ， 还 需要 考虑 浮动 和 正常 流 的 关系 ， 在 合适 的 位 置 还 需要 清除 浮动 ， 
这 些 细节 都 是 在 布局 中 需要 考虑 的 点 。 下 一 章 我 们 将 讲解 组 件 相关 的 知 
识 ， 掌 握 布 局 后 ， 我 们 只 需要 将 组 件 放 置 在 合适 的 布局 中 ， 即 可 构建 出 
要 的 界面 。 














第 4 章 组件 


小 程序 定义 了 各 种 各 样 的 组 件 ， 它 们 在 WXML 中 起 着 各 不 相同 的 作 
用 。 与 HTML 元 素 一 样 ， 一 个 组 件 是 指 从 组 件 开始 标签 到 结束 标签 的 所 
有 代码 ， 由 于 组 件 可 能 会 被 转 诺 为 不 同 问 对 应 的 代码 ， 所 以 在 页 面 创建 
过 程 中 ， 不 能 使 用 小 程序 组 件 标 签 以 外 的 标签 。 在 本 章 中 ， 我 们 将 介绍 
小 程序 相关 组 件 ， 包 括 视 图 容器 、 基 础 容器 、 表 单 组 件 、 导 航 媒 体 组 
件 、 地 图 、 画 布 、 客 服 会 话 8 大 类 。 为 了 让 大 家 更 好 地 理解 每 个 组 件 的 
特性 ， 避 免 干 扰 理解 ， 在 本 章 中 我 们 尽 可 能 少 地 使 用 WXSS， 所 以 案例 
界面 不 太美 观 。 


4.1 ”组件 定义 及 属性 





上 一 章 介 绍 了 小 程序 框架 原理 ， 在 框架 基础 上 官方 提供 了 一 系列 基 
础 组 件 ， 开 发 者 可 通过 这 些 基 础 组 件 进行 任意 组 合 快速 开发 。 小 程序 组 
件 类 似 于 HTML 元素， 每 个 标签 代表 一 个 组 件 ， 官 方 对 组 件 作 了 如 下 和 定 
义 : 








1) 组 件 是 视图 层 的 基本 组 成 单元 。 
2) 组 件 自 带 一 些 功 能 与 微 信 风 格 的 样式 。 
3) 一 个 组 件 通 常 包括 开始 标签 和 结束 标签 ， 属 性 用 来 修饰 这 个 组 


件 ， 内 容 在 两 个 标签 之 内 。 


按 类 型 可 以 将 组 件 划 分 为 七 大 类 : 视图 容器 、 基 础 内 容 、 表 单 、 导 
航 、 多 媒体 、 地 图 、 画 布 。 


一 个 完整 的 组 件 结构 如 下 : 





<tagname property="value">contents</tagname> 





组 件 可 以 通过 属性 进行 配置 ， 属 性 只 能 用 在 开始 标签 或 单个 自 闭合 
标签 上 ， 不 能 用 于 结束 标签 。 一 个 组 件 可 以 对 应 多 个 属性 ， 属 性 具有 名 





称 和 值 两 部 分 ， 组 件 的 属性 名 称 都 是 小 写 ， 以 连 字 符 熏 连接。 组 件 局 
性 分 为 所 有 组 件 都 有 的 共同 属性 和 组 件 自 定义 的 特殊 属性 。 





1. 组 件 的 共同 属性 


组 件 的 共同 属性 指 每 个 组 件 都 有 的 属性 ， 在 每 个 组 件 中 它们 代表 的 
意义 和 作用 都 一 样 ， 如 下 所 示 : 


id: 组 件 的 唯一 表示 ， 保 持 整 个 页 面 唯一 。 
:class: 组 件 里 的 样式 类 ， 在 对 应 的 WXSS 中 定义 的 样式 类 。 


style: 组 件 的 内 联 样式 ， 可 以 动态 设置 的 内 联 样式 。 使 用 方式 同 
HTML 标 签 style 属 性 。 


hidden: 组 件 是 否 显示 ， 所 有 组 件 默认 显示 。 


.data-*: 目 定 义 属 性 ， 组 件 上 触发 事件 时 ， 会 发 送 给 事件 处 理 函 
数 。 事 件 处 理 函 数 可 以 通过 datascl 获 取 。 


:bind*/catch*: 组 件 的 事件 ， 绑 定 罗 辑 层 相关 事件 处 理 函 数 。bind 
为 冒 泡 事 件 ，catch 为 非 冒 泡 事件 。 





除 上 述 属性 以 外 几乎 所 有 组 件 都 有 目 定 义 属 性 ， 可 以 对 该 组 件 的 功 
能 或 样式 进行 修饰 ， 有 基体 参考 各 个 组 件 的 定义 。 


2. 组 件 的 属性 类 型 





每 个 属性 都 有 其 对 应 的 类 型 ， 使 用 时 应 给 属性 值 传 入 对 应 的 类 型 
值 ， 属 性 按 类 型 可 分 为 ; 


.Boolean: 布尔 值 ， 组 件 写 上 该 属性 ， 不 管 该 属性 等 于 什么 ， 其 值 
都 为 tue， 只 有 组 件 上 没有 写 该 属性 时 ， 属 性 值 才 为 false。 如 果 属 性 值 
为 变量 ， 变 量 的 值 会 被 转换 为 Boolean 类 型 。 


.Number: 数字 。 

'String: 字符 串 。 

.Array: 数组 。 

.Object: 对象。 

:EventHandler: 事件 处 理 函 数 名 。 


.Any: 任意 属性 。 


4.2 ”视图 容器 





有 过 前 端 经 验 的 同学 都 了 解 ， 在 前 端 项 目 中 我 们 第 使 用 DIV+CSS 进 
行 页 面 布局 ， 其 中 <div/> 没 有 任何 语义 和 功能 ， 仅 作为 容器 元 素 存在 ， 
在 小 程序 中 ， 有 一 套 类 似 <div/> 的 容器 组 件 ， 那 就 是 <view/>、<scroll- 
view/> 和 <swiper>。 在 HTML 中 大 部 分 标签 内 部 能 藤 套 任何 标签 ， 如 
<div/>、<span/>、<section/>、<p/> 等 ， 但 是 在 小 程序 中 ， 大 部 分 组 件 都 
有 它 自 己 特殊 的 功能 和 意义 ， 标 签 都 有 特定 的 用 法 ， 内 部 也 只 能 组 套 指 
定 的 组 件 ， 而 容器 组 件 内 部 能 谋 套 任何 标签 ， 容 器 组 件 是 构建 布局 的 基 
础 组 件 。 本 小 节 主 要 介绍 视图 类 容器 。 








4.2.1 view 组 件 





<view/> 是 一 个 块 级 容器 组 件 ， 没 有 特殊 功能 ， 主 要 用 于 布局 展 
示 ， 是 布局 中 最 基本 的 UI 组 件 ， 任 何 一 种 复杂 的 布局 都 可 以 通过 购 套 
<view/> 组 件 ， 设 置 相关 WXSS 实 现 。<view/> 文 持 第 用 的 CSS 布 局 属 
性 ， 如 display、float、position 甚 至 Flex 布 局 等 ， 熟 悉 DIV+CSS 布 局 的 读 
者 上 手 应 该 很 容易 。 











<view/> 具 备 一 套 关 于 点 击 行 为 的 属性 : 





.hover:， 是 否 启 动 点 击 态 ， 默 认 值 为 false。 


:hover-class: 指定 按 下 去 的 样式 。 当 hover-class="none" 时 ， 没 有 点 
击 态 效果 ， 默 认 值 为 none。 


.hover-startrtime: 按 住 后 多 和 久 出 现 点 击 态 ， 单 位 军 秒 ， 默 认 值 为 
50 。 


-hover-stay-time: 手指 松 开 后 点 击 态 保留 时 间 ， 单 位 坚 秒 ， 默 认 什 
为 400。 





为 了 大 家 让 大 家 能 更 直观 的 了 解 <view/> 布 局 的 特性 ， 下 面 为 大 家 
示范 一 些 第 用 的 布局 。 


1. 水 平 3 栏 布局 


水 平 3 栏 布局 如 图 4-1 所 示 。 


1 2 3 


图 4-1 三 栏 布局 


水 平 3 栏 布局 思路 比较 简单 ， 我 们 在 一 个 <view/> 中 放置 另外 3 个 等 
分 <view/> 即 能 实现 ， 这 里 我 们 使 用 Flex 布 局 实现 ， 代 码 如 下 : 





<view style="display:flex;"> 
<view style="background-color:red;flex-grow:1;height:80rpx;"></view> 
<view style="background-color:blue;flex-grow:1;height:80rpx;"></view> 
<view style="background-color:green;flex-grow:1;height:80rpx;"></view> 
</view> 








2. 左 右 混 合 布局 





左右 混合 布局 如 图 4-2 所 示 。 








图 4-2 ”左右 混合 布局 


我 们 先 在 一 个 <view/> 中 水 平 放置 两 个 <view/>， 按 需要 设置 宽度 ， 
然后 在 右 侧 <view/> 中 再 创建 2 个 <view/> 组 件 ， 设 置 为 垂直 布局 ， 代 码 如 


下 : 





<view style="display:flex;height:400rpx;"> 
<view style="background-color:red;width:250rpx;color:#fff;">1</view> 
<view style="flex-grow:1;display:flex;flex-direction:column;"> 
<view style="flex-grow:1;background-color:blue;color:#fff;">2</view> 
<view style="flex-grow:1;background-color:green;color:#fff;">3</view> 
</view> 

</view> 





3. 上 下 混合 布局 


上 下 混合 布局 如 图 4-3 所 示 。 





图 4-3 ”上 下 混合 布局 





同 左右 混合 布局 思路 一 样 ， 我 们 先 在 一 个 <view/> 中 放置 两 个 垂直 





布局 <view/>， 按 需要 设置 高 度 ， 然 后 在 下 面 的 <view/> 中 再 创建 两 个 
<view/>， 设 置 为 水 平 布局 ， 代 码 如 下 : 





<view style="display:flex;flex-direction:column;height:400rpx;"> 
<view style="background-color:red;height:150rpx;color:#fff;">1</view> 
<view style="flex-grow:1;display:flex;"> 
<view style="flex-grow:1;background-color:blue;color:#fff;">2</view> 
<view style="flex-grow:1;background-color:green;color:#fff;">3</view> 
</view> 

</view> 











过 上 面 3 个 案例 大 家 可 以 发 现 ， 任 何 复杂 的 布局 都 是 通过 不 断 衣 
套 <view/> 实 现 的， 在 小 程序 中 使 用 <view/> 束 像 我 们 在 HTML 使 用 
<div/> 一 样 便捷 ， 通 过 <view/> 我 们 可 以 构建 出 任何 想 要 的 界面 。 


4.2.2 scroll-view 组 件 





在 布局 过 程 中 ， 我 们 需要 一 些 容器 具备 可 滑动 的 能 力 ， 尽 管 我 们 可 
以 通过 给 <view/> 设 置 overflow: scroll 属 性 来 实现 ， 但 由 于 小 程序 实现 原 
理 中 没有 DOM 概 念 ， 我 们 没 法 直接 监听 <view/> 滚 动 、 触 项 、 触 底 等 事 
件 ， 这 时 便 需 要 使 用 <scroll-view/>。<scroll-view/> 在 <view/> 基 础 上 增加 
了 滚动 相关 属性 ， 通 过 设置 这 些 属性 ， 我 们 能 啊 应 滚动 相关 事件 。 
<scroll-view/> 属 性 如 下 : 





scroll-x: 人 允许 横 辐 滚动， 默认 为 false。 


scroll-y: 允许 纵向 滚动 ， 默 认为 false。 





Upper-threshold: 距 顶 部 /左边 多 远 时 (单位 px) ， 触 发 
scrolltoupper 事 件 ， 默 认 值 为 50。 


:lower-threshold: 距 底 部 /右边 多 远 时 (和 单位 px) ， 人 触发 
scrolltolower 事 件 ， 默 认 值 为 50。 


scroll-top: 设置 紧 辐 滚动 条 位 置 。 


.Scroll-left: 设置 横 回 滚动 条 位 置 。 








:scroll-into-view: 值 应 为 某 子 元 素 id， 滚 动 到 该 元 素 时 ， 元 素 顶部 





对 齐 深 动 区 域 顶部 。 


"bindscrolltoupper: 滚动 到 顶部 /左边 ， 会 触发 scrolltoupper 事 件 。 





:bindscrolltolower: 滚动 到 底部 /右边 ， 会 触发 scrolltolower 事 件 。 


:bindscroll: 滚动 时 触发，event.detail={scrollLeft，scrollTop， 
scrollHeight, scrollWidth, deltaX, deltaY}。 


目前 ， 有 些 组 件 不 能 在 <scroll-view/> 中 使 用 : <textarea/>、 


<video/>、<map/>、<comvas/>。 
下 面 我 们 通过 <scroll-view/> 创 建 一 个 纵向 滚动 区 域 ， 并 监听 它 的 滚 


动 事件 。 需 要 注意 的 是 ， 在 使 用 纵向 滚动 时 ， 需 要 先 给 <scroll-view/> 一 
个 固定 高 度 ， 如 图 4-4 所 示 。 





代码 如 下 : 


图 4-4 ”可 滚动 视图 区 





<scroll-view class="scroll-container" upper-thresho1ld="0" 
lower-threshold="100" scroll-into-view="{{toView}}" 
bindscroll="scroll" bindscrolltolower="scrollToLower" 
bindscrolltoupper="scrollToUpper" scroll-y="true" 
scroll-top="{{scrollTop}}"> 


<view id="item-1" 
<view id="item-2" 
<view id="item-3" 
<view id="item-4" 
<view id="item-5" 
<view id="item-6" 
</scroll-view> 


class="scroll-item bg-red">1</view> 
class="scroll-item bg-blue">2</view> 
class="scroll-item bg-red">3</view> 
class="scroll-item bg-blue">4</view> 
class="scroll-item bg-red">5</view> 
class="scroll-item bg-blue">6</view> 


<view class="act"> 轩 
<button bindtap="scrollToTop"> 点 击 深 动 到 顶部 </button> 
</view> 











/* 给 予 固 定 高 度 */ 

.SCcroll-container { 
border : solid 1px; 
height : 800rpx; 





} 


.SCcroll-container .scroll-item { 
height : 300rpx; 
width : 120%; 

} 


.bg-blue { background-color: #87CEFA; } 
.bg-red { background-color: #FF6347; } 


.act { padding : 10px; } 


Page( { 
data : { 
toView : 'item-3'// 第 一 次 泻 染 时 ，<scroll_view> 默 认 深 动 到 id 值 为 "item-3" 区 域 


了 




















scrollToUpper : function() { 
console.1og( ' 触 发 到 深 动 顶部 事件 ' ) ; 
}, 


scrollToLower : function() 


console.1og( ' 触 发 滨 动 到 底部 事件 ' ); 


}, 

// 点 击 按钮 时 ， 滚 动 到 顶部 

Scrol1 : function() { 
console.1og( ' 触 发 了 深 动 事件 ' ) 


了 

















scrollToTop : function() { 
this.setData( { 
scrollTop : '0' 


} ); 
} 
} ); 








布局 页 面 时 ， 如 对 事件 没有 特殊 要 求 ， 也 可 以 使 用 <view/> 代 蔡 
<scroll-view/> 进 行 布局 。 


4.2.3” 滑 块 视图 组 件 


渭 块 视图 容 占 在 前 端 开 发 中 是 一 个 常见 组 件 ， 利 用 它 我 们 可 以 实现 
轮 播 图 、 滑 动 页 面 、 图 片 预览 等 效果 。 一 个 完整 的 滑 块 视图 组 件 由 
<swiper/> 和 <swiper-iteny> 两 个 标签 组 成 ， 它 们 不 能 单独 使 用 ， 一 个 
<swiper/> 中 只 能 放置 一 个 或 多 个 <swiper-item/>， 放 置 其 他 节点 会 被 删 
除 ，<swiper-item/> 内 部 能 放置 任何 组 件 ， 默 认 宽 高 自动 设置 为 1009%。 
<swiper-item/> 组 件 作 为 容器 没有 任何 特殊 属性 ，<swiper > 组 件 属性 如 
下 








indicator-dots: 是 否 显 示 面 板 指示 点 ， 默 认为 false。 
"autoplay: 是 否 上 自动 切换 ， 默 认为 false。 

current: 当前 所 在 页 面 的 ndex， 默 认为 0。 
interval: 上 自动 切换 时 间 间 隅 ， 默 认为 5000。 
duration: 滑动 动 国 时 长 ， 默 认为 1000。 

-circular: 是 否 采用 衔接 滑动 ， 默 认 值 为 false。 


bindchange: current 改 变 时 会 触发 change 事 件 ，event.detail= 


{current: current}。 


本 案例 主要 讲解 滑 块 视图 最 基本 用 法 ， 开 始 图 如 图 4-5 所 示 。 





暂停 | 播放 


图 4-5 ”简单 轮 播 示例 


示例 代码 如 下 : 








< 工 -开启 默认 面板 指示 点 ， 并 设置 为 自动 播放 - -> 











<swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}" 
current="0" interval="2000" duration="300" bindchange="change"> 
<block wx:for="{{sliderList}}"> 
<swiper-item class="{{item,.className}}">{{item.name}}</swiper-item> 
</block> 
</swiper> 


<view> 
<button bindtap="play"> 和 暂停 | 播放 </button> 
</view> 


.banner { height : 400px; background-color: #ddd; } 


.bg-blue { background-color: #87CEFA; } 
.bg-red { background-color: #FF6347; } 
.bg-green { background-color: #43CD80; } 


Page( { 
data : { 
autoplay : true, 
sliderList : [ 


{ className : 'bg-red', name : 'slider1' }, 
{ className : 'bg-blue', name : 'slider2' }, 
{ className : 'bg-green', name : 'slider3' } 


}, 


play : function() { 
this.setData( { 
autoplay : !this.data.autoplay 
/ 
了 
change : function() { 
console.1og( ' 执 行 了 滚动 ' )， 


} 
} ); 





2. 目 定义 轮 播 图 


<Sswiper/ > 默认 组 件 中 不 提供 面板 指示 点 的 样式 设置 ， 而 在 轮 播 组 件 
中 ， 我 们 常常 需 要 设置 自 定 义 面板 指示 点 ， 这 时 可 以 通过 bindchange 事 
件 实现 图 4-6 一 样 的 定义 面板 。 





图 4-6 自 定义 轮 播 


代码 如 下 : 





<view class="customSwiper"> 
<!-- 不 开启 默认 面板 - -> 
<swiper class="banner" autoplay="true" interval="2000" duration="300" 
bindchange="switchTab"> 
<block wx:for="{{sliderList}}"> 
<swiper-item> 
<image style="width:100%;height:100%;" src="{{item.imageSource}}"/> 
</swiper-item> 
</block> 
</swiper> 
<1!-- 自 定义 面板 构建 - -> 
<view class="tab"> 
<block wx:for="{{sliderList}}"> 
<view wx:if="{{item,.selected}}" class="tab-item 
selected">{{index+1}}</view> 
<view wx:else class="tab-item">{{index+1}}</view> 
</block> 
</view> 

</view> 

.CUStomSwiper { height : 379.5rpx; position: relative; } 

.CUStomSwiper swiper{ height : 100%; } 

/* 自 定义 面板 样式 */ 

.tab { height : 7Orpx; position: absolute; bottom : 0; display: flex; 
width : 100%; text-align: center; justify-content : center,; 
align-items: center; } 

‘tab .tab-item{ background-color: #ccc; height : 5Orpx; width : S50Orpx; 
line-height: 50rpx; font-size : 12rpx; color : #fff; border-radius: 4px; 
margin-right : 10px; } 

‘tab .tab-item.selected { background-color: red; } 

Page( { 

data : { 












































sliderList : [ 
: './image/banner1.jpg' }, 


{ selected true, imageSource 
{ selected : false, imageSource : './image/banner2.jpg' }, 
{ selected : false, imageSource : './image/banner3.jpg' } 


] 


}, 
// 监 听 Sswiper 滚 动 事件 ， 并 切换 面板 
SwitchTab : function( e ) { 


var sliederList = this,data.SliderList， 


i, 1; 

// 修 改 指示 点 选中 态 

for ( i = 0; item = sliederList[i]; ++i ) { 
item.selected = e.detail.current == 工 
































} 
this.setData( { 
sliderList : sliederList 


} ); 





4.3 ”基础 组 件 


4.3.1 icon 





<icon/> 是 页 面 中 非常 常用 的 组 件 ， 它 通常 用 于 表示 状态 ， 起 到 引导 
作用 。 在 HTML 中 ， 我 们 通常 通过 修改 元 素 样式 、 添 加 图 片 等 方案 实现 
图 标 ， 在 <icon/> 中 ， 官 方 为 大 家 提供 了 一 套 符合 微 信 设 计 规 范 的 样式 类 
型 ， 当 然 我 们 也 可 以 通过 自 定义 样式 创建 自 定 义 图 标 。<icon/> 有 以 下 属 
性 


type: icon 的 类 型 。 有 效 值 包括 : success、success_no_circle、 


info、warn、waiting、cancel、download、search、clear。 
size: icon 的 大 小 ， 单 位 px。 默 认 值 为 23px。 
color: icon 的 颜色 ， 同 CSS 的 color。 
1. 示 例 


<icon/> 的 使 用 十 分 简单 ， 下 面 为 大 小 不 同 、 不 同类 型 、 不 同 颜 色 的 
图 标 展示 ， 如 图 4-7 所 示 。 


微 信 开 发 者 工具 0.9.092300 [XxX 
wifi [R | Wxml » 


Pb <page>.. .</pag 


图 标 大 小 展示 


successpx success no_circlepx 


safe_successpx success_circlepx 


info_circlepx 


© 


waitine_circlepx 


safe_ warnpx 


downl oadpx 


Q 


clearpx 


图 标 颜色 展示 


color : ereen color:reb (139, 101, 8) 





图 4-7 _ icon 示例 


代码 如 下 : 





<view class="section size"> 
<view class="title"> 图 标 大 小 展示 </view> 
<view class="]list"> 
<block wx:for="{{sizeList}}"> 
<view class="item"> 
<icon type="success no_circle" size="{{item}}"/> 
<label>{{item}}px</label> 
</view> 
</block> 
</view> 
</view> 
<view class="section"> 
<view class="title"> 图 标 类 型 展示 </view> 
<view class="]list"> 
<block wx:for="{{typeList}}"> 
<view class="item"> 
<icon type="{{item}}" size="30"/> 
<label>{{item}}px</label> 
</view> 
</block> 
</view> 
</view> 
<view class="section"> 
<view class="title"> 图 标 颜 色 展 示 </view> 
<view class="]list"> 
<block wx:for="{{colorList}}"> 
<view class="item"> 
<icon type="info" color="{{item}}"/> 
<label>color:{{item}}</label> 
</view> 
</block> 
</view> 
</view> 









































.Section{ font-size : 12px; padding : 10px; } 

.Section .list{ display:flex; flex-wrap : wrap; } 

.Section .list .item { width : 300rpx; padding : Spx 0; display: flex; 
flex-direction:column; justify-content :flex-end; } 

.Section.size .list .item { width : 100rpx padding : 0; } 

.Section .list .item label { text-align: center; } 

.Section .list .item icon { text-align: center; } 





Page( { 
data : { 
/* 不 同 大 小 */ 








sizeList : [10, 20, 30, 40], 

/* 不 同类 型 */ 

typeList : ['success','success no_circle', 'safe_ success', 
'success_circle', 'info','info_circle', 'waiting', 
'waiting_circle', 'warn', 'safe warn', 'circle', 'download', 
'cancel', 'search', 'clear'], 

/* 不 同 颜色 */ 

colorList : ['green', "rgb(139,101,8) '] 


} ); 











2. 自 定义 样式 <icon/> 组 件 


里 然 官 方 为 大 家 预 设 了 一 些 和 常用 的 样式 ， 但 是 在 项 目 中 我 们 常常 会 
使 用 上 自 定 义 的 UI 风格 ， 这 时 就 需要 创造 自 定义 样式 的 <icon/> 组 件 ， 图 4- 
8 所 示 的 案例 中 我 们 将 通过 固定 <icon/> 大 小 、 位 移 、 背 景 图 实现 自 定义 
图 标的 效果 ， 如 图 4-9 所 示 。 这 种 方式 在 网 页 布局 中 十 分 常见 ， 在 小 程 
序 中 的 使 用 也 完全 一 致 。 虽 然 这 种 实现 方式 适合 大 部 分 标签 ， 但 使 用 


<icon/> 标 签 更 符合 语义 。 
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图 4-8 图 标 背 景 
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图 4-9 目 定 义 icon 


代码 如 下 : 





<icon class="myicon home"/> 
<icon class="myicon arrow"/> 
<icon class="myicon sun"/> 
<icon class="myicon refresh"/> 


/* 固 定 背 景 图 与 图 标 大 小 */ 

.myicon{ background: url( ./image/icons.jpg ) no-repeat; background-size: 
1100rpx 826rpx; width : 60rpx; height : 60rpx; } 

/* 移 动 背景 位 置 ， 实 现 不 同 icon*/ 

.myicon.arrow{ background-position: -90rpx -185rpx; } 

.myicon.home{ background-position: -520rpx -90rpx; } 

.myicon.sun{ background-position: -90rpx -575rpx; } 

.myicon.refresh{ background-position: -730rpx -476rpx; } 


























.myicon { margin-right: 20rpx; } 





示例 中 ， 根 据 微 信 提 供 的 特性 我 们 使 用 了 rpx 单 位 ， 让 <icon/> 具 有 
目 适 用 功能 。<icon/> 是 项 目 中 第 用 的 组 件 ， 开 发 过 程 中 应 尽量 使 用 小 程 
序 提供 的 系统 样式 ， 这 能 保证 小 程序 在 微 信 系统 中 UI 风 格 的 一 致 性 。 对 
于 某 些 特殊 情况 ， 我 们 可 以 在 系统 图 标 基 础 上 进行 拓展 ， 满 足 开发 需 


要 。 








4.3.2 _ text 组件 


<text/> 组 件 主 要 用 于 文本 内 容 的 展示 ， 类 似 HTML 中 <p/> 标 签 ， 在 
小 程序 中 ， 只 有 <text/> 节 扣 内 部 的 内 容 能 被 长 授 选 中 ， 大 家 在 展示 文本 
的 时 候 一 定 要 根据 这 个 特性 注意 场景 的 使 用 。<text/> 是 行内 元 系 ， 除 了 
组 件 共 同属 性 外 并 没有 提供 其 他 属性 ， 文 本 中 的 内 容 文 持 转 义 字符 “V， 
常用 的 转 义 字符 可 以 参考 网 络 资料 。<text/> 组 件 内 只 支持 <text/> 骨 套 ， 
这 样 我 们 能 通过 仍 套 <texty> 实 现 东 些 字 符 加 粗 、 标 红 等 特殊 样式 的 设 
下 





<text/> 用 法 非常 简单 ， 将 文本 放置 到 <text> 标 俭 中 间 即 可 ， 在 示例 
中 "Mn"、"\t" 转 义 符 都 部 被 正常 转译 ， 如 图 4-10 所 示 。 
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图 4-10 ”text 组 件 示例 


代码 如 下 : 





<text>{{content}}</text> 


Page( { 
data : { 
content : ' 我 是 内 容 \n 我 是 内 容 \t 我 是 内 容 ' 
} 
} ); 





小 程序 中 没有 <em/><strong 放 等 标签 ， 不 过 我 们 可 以 通过 <text/> 髓 
套 、 设 置 样式 达到 同样 的 效果 。 


4.3.3 progress 组 件 





<progress/> 用 于 显示 进度 状态 ， 比 如 资源 加 载 、 用 户 资料 完成 度 、 
媒体 资源 播放 进度 等 。 目 前 ，<progress/> 是 通用 的 进度 条 组 件 ， 我 们 也 
可 以 利用 各 种 布局 、 样 式 实 现 一 套 目 定义 进度 条 。progress 是 块 级 元 
素 ， 必 性 如 下 : 


:percent: 当前 进度 占 所 有 进度 的 百分比 ， 取 值 区 间 为 0 到 100。 








.Show-info: 是 耕 在 进度 条 右 侧 显示 百分比 ， 默 认为 false。 
stroke-width: 进度 条 线 的 宽度 ， 单 位 px， 默 认 值 为 6。 


color: 进度 条 颜色 ， 默 认 值 为 #09BB07。 








“active: 泻 染 时 是 否 开局 进度 条 从 左 到 右 的 动画 ， 默 认 值 为 false。 
开启 后 每 次 修改 percent 触 发 进度 条 重新 泻 染 ， 都 会 从 无 到 右 显 示 动 男 


下 面 简单 展示 进度 条 的 相关 属性 ， 如 图 4-11 所 示 。 


代码 如 下 : 


微 信 开 发 者 工具 0.9.092300 
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图 4-11 ”progress 示 例 


<progress percent="20"></progress> 


<progress percent="30" 
<progress percent="40" 
<progress percent="50" 
<progress percent="60" 


show-info="true"></progress> 
stroke-width="40"></progress> 
color="#CD5555"></progress> 
active></progress> 
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4.4 表单 组 件 





表单 是 应 用 中 获取 用 户 输入 的 重要 手段 ， 它 对 于 系统 极其 重要 ， 用 
户 在 应 用 中 输入 的 大 部 分 内 容 都 是 在 表单 元 素 中 完成 的 。 丁 主要 为 大 
家 介绍 表单 相关 组 件 、 特 性 、 组 件 之 间 的 关系 。 如 何 将 数据 上 传 至 后 台 
会 在 第 5 章 中 介绍 。 本 节 中 提 到 的 表单 组 件 不 仅 可 以 放置 在 <form/> 标 答 
中 使 用 ， 同 时 也 可 以 作为 单独 组 件 和 其 他 组 件 混 合 使 用 。 











4.4.1 _ radio 组 件 


单项 框 可 以 用 来 生成 一 组 单 选 按钮 ， 供 用 户 从 一 批 固定 的 选项 中 作 
出 选择 ， 它 适合 于 可 用 有 效 数据 不 多 的 情况 ， 小 程序 中 单 选 框 是 由 
<radio-group/>《〈 单 项 选择 器 ) 和 <radio/>《〈 单 选项 目 ) 两 个 组 件 组 合 而 
成 ， 一 个 包含 多 个 <radio/> 的 <radio-group/> 表 示 一 组 单 选 项 ， 在 同一 组 
单 选 项 中 的 <radio/> 是 互 太 的 ， 当 一 个 按钮 被 选中 ， 之 前 选中 的 按钮 束 
变 为 非 选中 。 当 需要 用 户 在 竺 选项 中 选择 唯一 的 答案 时 ， 融 需要 使 用 到 
单项 框 。 





1.radio-group 


在 小 程序 中 <radio/> 不 能 单独 使 用 ， 同 一 组 <radio/> 需 要 包含 在 一 个 
<radio-group/> 中 ， 这 样 才能 形成 一 组 单项 选择 按钮 ，<radio/> 的 选中 态 
不 能 直接 获取 ， 需 要 通过 <radio-group/> 的 change 事 件 进行 获取 。<radio- 
group/> 内 部 除了 包含 <radio/> 也 可 以 包含 其 他 标签 ， 它 更 像 是 一 个 看 不 
见 的 容器 ， 当 包含 其 他 标签 时 ， 也 仅仅 对 标签 内 部 的 <radio/> 产 生 影 
响 ， 而 不 影响 其 他 组 件 。<radio-group/> 仅 有 一 个 属性 : 





bindchange: 绑 定 <radio-group/>change 事 件 ，<radio-group/> 中 的 选 
中 项 发 生变 化 时 触发 change 事 件 ，event.detail={value: 选中 项 radio 的 


value}。 


2.radio 
<radio/> 是 <radio-group/> 中 的 一 个 单 选 按钮 ， 具 有 以 下 属性 : 


“Value: <radio/> 标 识 。 当 该 <radio/> 选 中 时 ，<radio-group/> 的 


change 事 件 会 携带 <radio/> 的 value。 


checked: 当前 <radio/> 是 否 选中 ， 一 个 <radio-group/> 中 只 能 有 一 了 1 
<radio/> 的 checked 为 tue， 如 果 设 置 多 个 ， 将 默认 选中 最 后 一 个 为 true 的 
单 选 项 ， 默 认为 false。 


disabled: 是 人 否 禁 用 ， 人 禁用 后 不 能 点 击 ， 默 认为 false。 
.color: radio 的 颜色 ， 同 CSS 的 color。 
3. 示 例 


这 里 为 大 家 编写 一 组 单 选项 ， 以 展示 <radio-group/> 和 <radio/> 的 关 
系 ， 如 图 4-12 所 示 。 


代码 如 下 : 





<radio-group bindchange="changeChoosed"> 
<view wx:for="{{radios}}"> 
<radio value="{{item,.value}}" checked="{{item.checked}}"/>{{item.text}} 
</view> 
</radio-group> 
Page( { 
data : { 
radios : [ 
{value : '1',text : ' 选 项 1',checked : false }， 
{value : '2',text : ' 选 项 2',，checked : true}, 
{value : '3',text : ' 选 项 3',，checked : false}, 


{Value : '4',text : “' 选 项 4'，checked : false} 
有 
changeChoosed : function( event ) 
console.1og( ' 你 选中 了 : ' + event.detail.value ); 


} 
} ); 
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图 4-12 radio 示例 


点 击 案例 中 的 单 选 框 会 发 现 ， 调 试 工 具 控 制 台 会 打印 出 当前 选中 的 
项 的 value 值 。 在 这 个 案例 中 点 击 文案 是 不 能 选中 单 选 框 的， 这 种 体验 略 
过， 我 们 可 以 使 用 <label/> 对 其 进行 优化 ， 有 共 体 使 用 方式 可 以 参考 label 
组 件 。 





4.4.2 “checkbox 组 件 


与 单 选 框 一 样 ， 小 程序 中 的 复 选 也 是 由 <checkbox-group/> (多 项 选 
择 器 ) 和 <checkbox/> (多 选项 目 〉 两 个 组 件 组 合 而 成 。 一 个 包含 多 个 
<checkbox/> 的 <checkbox-group/> 表 示 一 组 多 选项 ， 一 组 多 选项 允许 在 符 
选项 中 选中 一 项 以 上 的 选项 。 





1.checkbox-group 


与 <radio-group/> 一 样 ，<checkbox-group/> 用 于 包 训 <checkbox/>， 
而 且 仅 有 一 个 属性 bindchange: 绑 定 <checkbox-group/>change 事 件 ， 
<checkbox-group/> 中 的 选中 项 发 生变 化 时 触发 change 事 件 ，event.detail= 
{value: [选中 项 checkbox 的 value 数 组 ]}。 


2.checkbox 


<checkbox/> 是 <checkbox-group/> 中 的 一 个 多 选项 目 ， 它 的 属性 和 
<radio/> 一 样 : 


.value: <checkbox/> 标 识 ， 选 中 时 触发 <checkbox-group/> 的 change 
事件 ， 并 携带 <checkbox/> 的 value。 


.checked: 当前 <checkbox/> 是 否 选 中 ， 可 用 来 设置 默认 值 ， 一 个 


<checkbox-group/> 人 允许 一 个 或 多 个 <checkbox/> 的 checked 为 true， 默 认为 


false。 


disabled: 是 否 禁用 ， 禁 用 后 不 能 点 击 ， 默 认为 false。 


3. 示 例 





我 们 通过 示例 为 大 家 演示 复 选 框 的 使 用 ， 如 图 4-13 所 示 。 
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图 4-13” 复 选 框 示例 


代码 如 下 : 





<checkbox-group bindchange="checkboxChange"> 
<view wx:for="{{countrys}}"> 
<checkbox value="{{item.value}}" checked="{{item.checked}}" 
disabled="{{item.disabled}}" /> 
{{item.name}} 
</view> 















































</checkbox-group> 
Page( { 
data : { 
countrys : [ 
{ name : ' 中 国 ',，value : '1' }, 
{ name : ' 美 国 ',，value : '2', checked : true }, 
{ name : ' 日 本 ',， value : '3', disabled : true }, 
{ name : ' 韩 国 ',，value : '4' }, 
{ name : ' 俄 罗斯 '，value : '5', checked : true } 
] 
}, 


checkboxChange : function( e ) { 
console.1og( ' 你 选中 的 项 目 有 : ' + e.detail.value ); 


} 
} ); 




















整体 来 看 复 选 框 和 单 选 框 的 使 用 方式 基本 一 人 怪 ， 最 大 的 区 别 在 于 交 
互 上 单 选 框 在 同一 组 单 选项 中 只 能 选中 一 个 ， 而 复 选 框 可 以 选中 多 个 ; 
选中 状态 切换 时 change 方 法 传 入 的 参数 值 一 个 是 传 入 单 值 ， 一 个 是 传 入 
数组 。 大 家 可 以 将 两 个 组 件 对 比 学 习 。 


4.4.3” ”switch 组 件 


<switch/> 是 一 个 可 以 在 两 种 状态 切换 的 开关 选择 器 ， 现 在 很 多 APP 
都 在 使 用 ， 最 常见 的 就 是 OS 或 Android 的 系统 开关 。<switch/> 在 功能 
和 <checkbox/> 有 点 接近 ， 不 同 点 在 于 <switch/> 是 个 单独 控件 ， 而 
<checkbox/> 是 由 多 个 单 选项 组 合 而 成 ， 在 小 程序 中 当 <switch/> 的 type 属 
性 值 为 checkbox 时 ， 它 的 UI 表现 和 <checkbox/> 非 常 接近 。switch 属 性 如 
下 : 


:checked: 是 否 选中 ， 默 认为 false。 


-type: <switch/> 的 UI 样 式 ， 有 效 值 为 Switch、checkbox， 默 认为 


Switch 。 


:bindchange: checked 改 变 时 触发 change 事 件 ，event.detal={value: 
checked}。 


<switch/> 非 党 容易 理解 ， 大 家 主要 了 解 它 的 两 种 UI 状态 ， 示 例如 图 
4-14 所 示 。 
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图 4-14 switch 示例 


代码 如 下 : 





<view wx:for="{{1list}}"> 
<switch data-name="{{item.name}}" type="{{item.type}}" 
checked="{{item.checked}}" bindchange="{{item.changeEventName}}"/> 
</view> 


Page( { 
data : { 
switchs : [ 


name : 'switchi1', 

checked : false, 

type : 'switch'， /* 滑 块 样式 */ 
changeEventName : 'change' 


}, 





name : "Switch2 '， 
checked : true, 
type : 'checkbox'， /* 选择 框 样式 */ 











changeEventName : "change' 


] 
}, 


// 修改 开关 选择 器 对 象 模型 的 选中 值 
change : function( e ) { 
var name = e.currentTarget.dataset.name, 
switchs = this.data.switchs, 
i, Ss; 














for (i= 0; s = switchs[i]; ++i ) { 


If ( s.name == name ) { 
s.checked = e.detail.value; 
break; 
} , | 
console.10og( name + “的 选中 态 为 : ' + e.detail.value ); 





} 
} ); 





示例 change 方 法 中 我 们 根据 用 户 的 操作 反 回 修改 了 数据 模型 中 对 应 
的 值 ， 页 面 进行 数据 绑 定 后 保证 数据 状态 和 页 面 状 态 一 致 是 非常 关键 
的 ， 在 项 目 过 程 中 大 家 一 定 要 注意 。 





4.4.4 label 组 件 


在 <radio/> 和 <checkbox/> 案 例 中 ， 点 击 文案 时 不 能 选中 对 应 的 单 选 
框 或 复 选 框 ， 这 时 我 们 可 以 利用 <label/> 改 进 表单 组 件 的 可 用 性 ， 通 过 
绑 定 for 属 性 让 用 户 点 击 <label/> 时 触发 对 应 的 控件 ， 目 前 可 以 绑 定 的 控 


件 有 <button/>、<checkbox/>、<radio/>、<switch/>。 


小 程序 中 <label/> 的 触发 规则 有 两 种 : 








-将 控件 放 在 标签 内 。 当 用 户 点 击 时 触发 中 第 一 个 控件 。 








.设置 <label/> 的 for 属 性 。 当 用 户 点 击 时 触发 for 属 性 对 应 的 控件 。for 
属性 优先 级 高 于 内 部 控件 。 


<label/> 只 有 一 个 for 属 性 : 绑 定 控件 的 id。 





下 面 的 示例 (如 图 4-15 所 示 〉 只 是 为 了 展示 label 的 特性 ， 一 些 奇 怪 
的 使 用 方式 并 不 推荐 在 项 目 中 使 用 。 
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图 4-15” label 示例 


代码 如 下 : 





<view class="section"> 
<!-- 点 击 文案 仍然 能 触发 <checkbox-group/> 的 change 事 件 - -> 
<checkbox-group bindchange="checkboxchange"> 
<label> 
<checkbox value="value-1"/> 点 击 文案 也 能 选中 radio 
</label> 
</checkbox-group> 
</view> 











<view class="section"> 





<label> 
<switch/> 点 击 文案 切换 开关 
</label> 
</view> 


<view class="section"> 





<view class="tit1le"> 选 中 元 素 内 第 一 个 </view> 
<checkbox-group> 
<label> 
<checkbox value="value-1"/> 第 一 个 
<checkbox value="value-2"/> 第 二 个 
<checkbox value="value-3"/> 第 三 个 
<checkbox value="value-4"/> 第 四 个 
<Checkbox value="value-5"/> 第 五 个 
</label> 
</checkbox-group> 
</view> 











<view class="section"> 
<view class="title">for 属 性 优先 级 大 于 内 部 元 素 </view> 
<checkbox-group> 
<label for="mycheckbox"> 
<checkbox/>label 内 部 元 素 
<checkbox/>label 内 部 元 素 
</label> 
<checkbox id="mycheckbox"/>labe1l 外 部 元 素 
<checkbox-group/> 
<view> 














.Section { font-size : 12px; padding: 20px 10px; border-top : solid 1px #eee; } 
.Section .title { padding : Spx 0; margin-bottom: Spx; display : block; } 
.Section input { border : solid 1px #ccc; background-color: #fff; border-radius: 4py》 


Page( { 
checkboxchange : function( event ) { 
console.log( event.detail.value ); 


} 
} ); 





上 例 中 ，<label/> 元 素 内 和 能 套 了 多 个 组 件 ， 我 们 点 击 <label/> 中 所 有 
字符 都 选中 第 一 个 控件 ， 但 是 点 击 单个 <checkbox/> 仍 然 可 以 修改 其 选 
择 状 态 ， 这 样 的 交互 体验 是 混乱 的 ， 所 以 在 实际 项 目 中 ， 一 个 <label/> 
尽量 只 包 庄 一 个 组 件 。 





4.4.5 slider 组 件 


滑动 选择 器 是 一 种 在 移动 端 常用 的 交互 组 件 ， 大 家 还 记得 手机 上 的 
亮度 调节 工具 吗 ? 那 就 是 滑动 选择 器 ， 在 小 程序 中 我 们 可 以 利用 
<slider> 快 速生 成 一 个 符合 系统 UI 的 滑动 选择 器 。 滑 动 选择 器 一 般 有 水 
平和 垂直 两 种 ， 小 程序 中 只 提供 了 水 平 的 形式 ， 滑 动 到 最 左边 是 最 小 
值 ， 滑 动 到 右边 是 最 大 值 。<slider/ > 属性 如 下 : 











:min: 最 小 值 ， 默 认 值 为 0。 
:max: 最 大 值 ， 默 认 值 为 100。 


step: 步 长 ， 取 值 必须 大 于 0， 并 且 可 被 (max-min) 整除 ， 默 认 值 
为 1。 


disabled: 是 否 禁用 ， 默 认 值 为 false。 


-value: 当前 取 值 ， 默 认 值 为 0。value 值 应 该 在 max 和 min 的 区 间 范 
内 ， 设 置 后 滑 块 会 滚动 到 对 应 位 置 。 


.color: 背景 条 的 颜色 ， 默 认 值 为 #e9e9e9。 


“selected-color: 已 选择 的 上 颜色， 默认 值 为 故 aad19。 








.Show-value: 是 否 在 右 侧 显示 当前 value。 


:bindchange: 完成 一 次 拖 动 后 触发 的 事件 ，event.detail={value: 


value}。 


本 示例 中 我 们 创建 两 个 滑动 选择 器 ， 分 别 绑 定 change 事 件 用 于 控制 
图 标的 大 小 和 透明 度 ， 如 图 4-16 所 示 。 
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图 4-16 ”slider 示 例 


代码 如 下 : 





<view class="section icon-wrapper"> 
<icon type="success" size="{{icon.size}}" 
style="opacity:{{icon.opacity/10}};"/> 
</view> 


<view class="section"> 
<view> 调 整 图 标 大 小 :</view> 
<slider show-value max="100" min="10" step="5" value="{{icon.size}}" 
bindchange="changeSize"></slider> 














</view> 


<view class="section"> 
<view> 调 整 透明 度 :</view> 
<slider show-value max="10" min="0O" step="1" value="{{icon.opacity}}" 
bindchange="changeOpacity"></slider> 
</view> 


.Section { padding : 10px; } 
.Section.icon-wrapper { height : 100px; font-size : 12px; } 


Page( { 
data : { 
Icon : { 
size : 20, 
opacity : 8 


}, 

/* 改变 大 小 */ 

changeSize : function( e ) { 
this.data.icon.size = e.detail.value,; 
this.setData( this.data ); 


}, 
/* 改变 透明 度 */ 
changeOpacity : function( e ) { 
this,.data.icon.opacity = e.detail.value; 
this,.setData( this.data ); 
} 
} ); 





请 动 选 择 喜 在 移动 器 交互 体验 优 于 字符 输入 ， 在 项 目 中 一 些 数 值 输 
入 项 都 可 以 考虑 使 用 滑动 选择 器 代 丛 。 


4.4.6 ”picker 组 件 


<picker/> 可 以 在 屏幕 底部 弹出 一 个 窗口 ， 供 用 户 在 所 提供 的 选择 项 
中 选择 一 个 。<picker/> 本 身 不 会 同 用 户 呈 现任 何 特殊 效果 ， 像 
<checkbox-group/> 一 样 用 于 包 庄 其 他 组 件 ， et 内 的 元 素 
时 会 从 底部 弹出 相应 选项 。<picker> 分 为 3 种 类 型 : 普通 选择 器 、 时 间 
选择 器 和 日 期 选择 器 ， 默 认 是 普通 选择 器 ， 这 三 种 选择 器 在 细节 上 略 有 
不 同 ， 我 们 可 以 通过 设置 <picker/> 组 件 mode 属 性 值 切 换 不 同 选 择 器 。 


1. 普 通 选 择 器 


普通 选择 器 是 默认 的 滚动 选择 器 ， 我 们 只 需要 绑 定 数组 类 型 的 数据 
束 能 直接 使 用 ， 对 应 的 mode 属 性 值 为 selector， 普 通 选 择 右 具有 以 下 属 
性 : 


-Tange: 底部 弹出 选项 的 数组 ， 默 认 值 为 一 个 空 数 组 []。 只 有 当 的 
mode 为 selector 时 ，range 属 性 才 有 效 。 


Tang-key: 当 range 是 一 个 Object Array 时 ， 通 过 rang-key 来 指定 
Object 中 key 的 值 作 为 选择 器 显示 内 容 。 





.value: mode 为 selector 时 ，value 值 是 数字 ， 表 示 选 择 了 range 中 的 
第 几 个 ， 从 0 开始 。 


:bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 


value}。 


disabled: 是 否 禁用 ， 默 认 值 为 false。 


在 下 面 的 示例 中 我 们 创建 了 一 个 <view/> 组 件 用 于 布局 ， 点 击 后 显 
示 相 应 选项 ， 如 图 4-17 所 示 。 


代码 如 下 : 





<picker value="{{selectedIindex}}" range="{{1list}}" bindchange="change"> 
<view class="picker"> 
当前 选中 : {{1list[selectedIndex]}} 
</view> 
</picker> 


.picker{ border:solid 1ipx #ddd; background-color: #fafafa; padding : 10px; } 


Page( { 
data : { 
// 创 建 对 应 选择 项 
list : [ 
!' 选 项 1' 
' 选 项 2 1 ” 
' 选 项 3 1 


], 
selectedIndex : 0 





}, 
change : function( e ) { 
// 修 改选 中 项 文案 
this.setData( { 
SelectedIndex : e.detail.value 


} ); 


} 
} ); 
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图 4-17 ”普通 选择 圳 示例 
2. 时 间 选 择 器 


在 普通 选择 右 基 础 上 ，<picker/> 提 供 了 时 间 选 择 占 ， 对 应 的 mode 属 
性 值 为 ime， 时 间 选 择 器 具有 以 下 属性 : 


value: 表示 选中 的 时 间 ， 字 符 串 格式 为 "hh: mm”， 默 认为 空 。 


start: 表示 有 效 时 间 范 围 的 开始 ， 字 符 串 格式 为 "hh: mm”， 默 认 
值 为 空 。 


-end: 表示 有 效 时 间 范 围 的 结束 ， 字 符 串 格式 事 为 hh: mm”， 默 
认 值 为 空 。 


:bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 


value}。 
.disabled: 是 否 禁 用 ， 默 认 值 为 false。 


下 面 举例 说 明 ， 如 图 4-18 所 示 。 
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图 4-18 ”时间 选 择 圳 示例 


代码 如 下 : 





<picker value="{{selectTime}}" mode="time" start="{{startTime}}" 
end="{{endTime}}" bindchange="change"> 
<view class="picker"> 
当前 选中 : {{selectTime}} 
</view> 
</picker> 


.picker{ border:solid 1px #ddd; padding : 10px; } 


Page( { 
data : { 
StartTime : "00:00", 
endTime : "24:00", 
selectTime : "11:30" 


, 
// 修 改选 中 项 文案 
change : function( e ) { 
this.setData( 
selectTime : e.detail.value 


} ); 
} 
} ); 





3. 日 期 选择 露 
日 期 选择 器 对 应 的 mode 属 性 为 date， 属 性 如 下 : 


value: 表示 选中 的 日 期 字符 串 格 式 为 yyyy-MM-dd”， 上 默认 值 为 


start; 表示 有 效 日 期 范围 的 开始 ， 字 符 串 格式 为 “yyyy-MM-dd”。 
-end: 表示 有 效 日 期 范围 的 结束 ， 字 符 串 格式 为 "yyyy-MM-dd”。 


“fields: 表示 选择 器 的 粒度 ， 有 效 值 为 year、month、day， 默 认 值 
为 day。 


:bindchange: value 改 变 时 触发 change 事 件 ，event.detail={value: 


value}。 


disabled: 是 否 禁用 ， 默 认 值 为 false。 


下 面 举例 说 明 ， 如 图 4-19 所 示 。 
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图 4-19 ”日 期 选择 器 示例 


代码 如 下 : 





<picker value="{{selectDate}}" mode="date" start="{{startDate}}" 
end="{{endDate}}" filed="day" bindchange="change"> 


<view class="picker"> 
当前 选中 : {{selectDate}} 
</view> 
</picker> 


.picker{ border:solid 1px #ddd; padding : 10px; } 


Page( { 

data : { 
startDate : "2016-02-01", 
endDate : "2016-12-30", 
selectDate : "2016-10-10" 

}, 

change : function( e ) { 
this.setData( { 

selectDate : e.detail.value 


} ); 
} 
} ); 


ee | 


4.4.7 ”picker-view 组 件 








<picker/> 一 共 提 供 了 3 类 选择 器 ， 这 3 类 选中 器 在 模式 、 交 互 上 都 比 
较 固 定 ， 而 在 业务 场景 中 我 们 可 能 会 涉及 多 种 形态 选择 器 ， 针 对 这 种 情 
况 ， 小 程序 提供 了 <picker-view/> 用 于 实现 目 定义 滚动 选择 右 ， 在 
<picker-view/> 中 我 们 能 按 目 己 意愿 插入 任意 数量 列 ， 同 时 也 能 设置 整个 


<picker-view/> 样 式 。 一 个 完整 的 <picker-view/> 包 含 两 个 标签 : <picker- 





view/> 和 <picker-view-column/>，<picker-view-column/> 用 于 创建 列 ， 列 
中 孩子 节点 高 度 会 自动 设置 为 <picker-view/> 的 选中 框 高 度 ，<picker- 
view/> 中 仅 可 放置 <picker-view-column/>， 放 置 其 他 节点 不 会 显示 。 


<picker-view/> 属 性 如 下 : 








value: 数组 类 型 ， 数 组 中 的 数字 依次 表示 <picker-view/> 内 的 
<picker-view-colume/> 选 择 的 第 几 项 《下 标 从 0 开始 ) ， 数 字 大 于 


<picker-view-column/> 可 选项 长 度 时 ， 选 择 最 后 一 项 。 
-indicator-style: 设置 选择 器 中 间 选 中 框 的 样式 。 


:bingchange: 当 滚 动 选 择 ，value 改 变 时 触发 change 事 件 ， 
event.detail={value: value}; value 为 数组 ， 表 示 picker-view 内 的 picker- 
view-column 当 前 选择 的 是 第 几 项 《〈 下 标 从 0 开始 ) 。 


下 面 用 示例 说 明 ， 如 图 4-20 所 示 。 本 示例 基于 <picker-view/> 实 现 一 
套 电 疝 系统 常用 的 配送 时 间 选 择 占 ， 每 个 日 期 对 应 一 套 自 己 的 配送 时 
段 ， 每 次 切换 日 期 ， 对 应 的 时 段 也 会 进行 相应 切换 。 
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图 4-20 ”上 自 定 义 滚动 选择 器 


代码 如 下 : 





<view class="custom-picker"> 
<view class="title"> 
自 定义 滑动 选择 器 
</view> 
<!-- 设置 内 部 选中 选项 高 度 - -> 








<picker-view indicator-style="height:80px;" bindchange="changeTime"> 
<!-- 日 期 列 --> 
<picker-view-column> 
<view class="cell" wx:for="{{1list}}" wx:key="index"> 
{{item.date}} 
</view> 
</picker-view-column> 
<!-- 时 段 列 --> 
<picker-view-column> 
<block wx:for="{{1list}}" wx:key="{{index}}" wx:if="{{item.selected}}"> 
<view class="cell" wx:for="{{item,.times}}" wx:for-index="subIndex" 
wx:for-item="subItem" wx:key="subIndex"> 
{{subItem.time}} 
</view> 
</block> 
</picker-view-column> 
</picker-view> 
</view> 

















,Custom-picker { top : 100px;width :80%; margin: 0 auto; margin-top : 200rpx; border 

.CUStom-picker .title { text-align:center;color:#444; padding : 20rpx; 
font-size:24rpx; background-color:#eee;border-bottom:solid 1px #ccc } 

.CUStom-picker picker-view{ height:200px; } 

.CUStom-picker picker-view .cell { text-align: center; line-height: 80px; } 

.CUStom-picker picker-view-column { border-right:solid 1px #ccc; position: relative, 


Page( { 
data : { 
Jist : 
date : '12 月 27 日 '， 
Selected : true, 
times : [{time : '19:00'},{time : '19:30'},{time : '20:00'}, 
{time : '20:30'},{time : '21:00'}] 
}1{ 
date : '12 月 28 日 '， 
selected : false, 
times : [{time : '9:00'},{time : '9:30'},{time : '10:00'}, 
{time : '10:30'},{time : '11:00'}] 
}1{ 
date : '12 月 29 日 '， 
selected : false, 
times : [{time : '12:00'},{time : '12:30'},{time : '13:00'}, 
{time : '14:30'},{time : '15:00'}] 
}] 
}, 


// 日 期 改变 时 演 染 对 应 时 间 
changeTime : function( e ) { 
var index = e,detail.value[9]，// 只 监控 日 期 改变 ， 时 间 改 变 忽略 
list = this.data.1list, 

























































































i, d; 
for (i= 0; d= list[i]; ++i ) { 
d.selected = i == index ? true : false; 


} 
this.setData( this.data ) 


} ); 


二 一 


4.4.8 input 组 件 





<input/> 是 单行 输入 框 ， 用 于 收集 用 户 信息 。 根 据 不 同 的 type 属 性 
值 ， 输 入 字段 拥有 很 多 形式 ， 与 HTML 不 同 的 是 小 程序 中 的 <input/> 类 
型 没有 按钮 类 型 ， 都 是 与 输入 相关 的 类 型 。<input/> 属 性 较 多 ， 但 大 部 
分 都 和 HTML 的 <input/> 相 似 ， 其 属性 如 下 : 














.value: 输入 框 的 初始 内 容 。 


type: input 的 类 型 ， 有 效 值 为 : text、number、idcard、digit、 


time、date。 





.password: 是 个 显示 密码 类 型 ， 默 认为 false。 





:placeholder: 输入 框 为 空 时 的 占 位 符 。 
.placeholder-style: 指定 placeholder 的 样式 。 


.placeholder-class: 指定 placeholder 的 样式 类 ， 默 认 值 为 input- 


placeholder。 


disabled: 是 否 禁 用 ， 默 认为 false。 








-maxlength: 最 大 输入 长 度 ， 设 置 为 0 的 时 候 不 限制 最 大 长 度 ， 默 认 


值 为 140。 


“cursor-spacing: 指定 光标 与 键盘 的 距离 ， 单 位 px。 取 input 距 离 底 
部 的 距离 和 cursor-spacing 指 定 的 距离 的 最 小 值 作 为 光标 与 键盘 的 距离 。 


“auto-focus: 目 动 聚焦 ， 拉 起 键盘 《开发 工具 和 暂 不 文 持 ) 。 页 面 中 


只 能 有 一 个 <input/> 或 <textarea/> 设 置 auto-focus 属 性 。 
-focus: 获取 焦点 〈 开 发 工具 暂 不 文 持 ) ， 默 认为 false。 


:bindinput: 当 键 盘 输 入 时 ， 触 发 input 事 件 ，event.detail={value: 
value}， 处 理 函 数 可 以 直接 return 一 个 字符 串 ， 将 蔡 换 输入 框 的 内 容 。 





:bindfocus: 输入 框 聚 焦 时 触发 ，event.detail={value: value}。 


:bindblur: 输入 框 失去 焦点 时 触发 ，event.detail={value: value}。 





:bindconfirm: 点 击 完 成 按钮 时 触发 ，event.detail={value: value}。 


下 面 举例 说 明 ( 如 图 4-21〉input 组 件 的 使 用 。 本 例 中 对 光标 位 置 的 
处 理 需 要 大 家 多 留意 ， 其 他 大 部 分 属性 大 家 应 该 都 比较 熟悉 ， 这 里 就 不 
一 一 举例 。 
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肉 容 中 123 会 被 替换 为 0 
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图 4-21 ”input 示 例 


代码 如 下 : 





<view class="section"> 
<input placeholder=" 默 认 样 式 ， 自 动 聚 焦 " auto-focus/> 
</view> 








<view class="section"> 
<input placeholder=" 内 容 中 123 会 被 蔡 换 为 0" bindinput="changeValue" 
type="number" maxlength="20"/> 
</view> 


<view class="section"> 
<input placeholder=" 输 入 3 个 以 上 字符 会 收 起 键盘 " bindinput="hideKeyboard" 
type="number"/> 
</view> 


.Section { font-size : 12px; padding : 10px Spx; border-bottom: dashed 1px #cecece,; 
.Section input { border : solid 1px #ccc; padding : © Spx; background-color: #fff; 上 


Page( { 
changeValue : function( e ) { 
console.log( e.detail ); 
var value = e.detail.value, 
pos = e.detail.cursor, 
left; 


// 计算 光标 位 置 

if ( pos != -1 ) { 
// 光标 在 中 间 位 置 
left = value.slice( ©0, pos ); 
// 修改 后 光标 位 置 要 随 之 变化 
pos = left.replace( /123/g, '2' ).length; 















































} 

return { 
value : e.detail.value.replace( /123/g, '2' ), 
cursor : pos 

} 


}, 
hideKkeyboard : function( e ) { 
If ( e.detail.value.length >= 3 )i{ 
// 调 用 关闭 键盘 API 
wx.hideKeyboard(); 




















4.4.9 ”textarea 组 件 


<textarea/> 是 多 行 输入 框 ， 与 HTML 中 多 行 输入 框 不 一 样 的 是 ， 小 
程序 中 <textarea 人 > 是 一 个 自 闭 合 标 签 ， 它 的 值 需要 赋值 给 value 属 性 ， 而 


不 是 被 标 签 包裹 。 与 <input/> 相 比 ， 大 部 分 属性 都 一 样 。 其 属性 如 下 : 








value: 输入 框 的 初始 内 容 。 





:placeholder: 输入 框 为 空 时 的 占 位 符 。 
.placeholder-style: 指定 placeholder 的 样式 。 


.placeholder-class: 指定 placeholder 的 样式 类 ， 默 认 值 为 textarea- 


placeholder。 


disabled: 是 否 禁 用 ， 默 认为 false。 








-maxlength: 最 大 输入 长 度 ， 设 置 为 0 的 时 候 不 限制 最 大 长 度 ， 默 认 
值 为 140。 


“auto-focus: 自动 聚焦 ， 拉 起 键盘 (开发 工具 暂 不 支持 ) 。 页 面 中 


只 能 有 一 个 <input/> 或 <textarea/> 设 置 auto-focus 属 性 。 


:focus: 获取 焦点 《开发 工具 暂 不 支持 ) ， 默 认为 false。 





"auto-height: 是 否 自 动 增高 ， 设 置 auto-height 时 ，style.height 不 生 
效 ， 初 始 状态 默认 为 一 行 高 度 。 
-fixed: 如 果 textarea 是 在 一 个 position: fixed 的 区 域 ， 需 要 显示 指定 


属性 fixed 为 true， 默 认 值 为 false。 


:cursor-spacing: 指定 光标 与 键盘 的 距离 ， 单 位 px。 取 textarea 距 离 
底部 的 距离 和 cursor-spacing 指 定 的 距离 的 最 小 值 作 为 光标 与 键盘 的 距 
离 。 默 认 值 为 0. 





:bindinput: 当 键 盘 输 入 时 ， 触 发 input 事 件 ，event.detail={value: 
value}，bindinput 处 理 函 数 的 返回 值 并 不 会 反映 到 textarea 上 。 


bindinput: 除了 date/time 类 型 外 的 输入 框 ， 当 键盘 输入 时 ， 触 发 
input 事 件 ，event.detail={value: value，cursor: 光标 位 置 }， 处 理 函 数 可 
以 直接 return 一 个 字符 串 ， 蔡 换 输入 框 的 内 容 。 


:bindfocus: 输入 框 聚 焦 时 触发 ，event.detail={value: value}。 
:bindblur: 输入 框 失去 焦点 时 触发 ，event.detail={value: value}。 


'bindlinechange: 输入 框 行 数 变化 时 调用 ， 首 次 这 染 时 也 会 触发 ， 
event.detail={height: 0, heightRpx: 0, lineCount: 0}:; 


:bindconfirm: 点 击 完成 时 ， 触 发 confirm 事 件 ，event.detail= 


{value: value}。 


下 面 用 示例 说 明 ， 这 个 示例 创建 了 一 个 <textarea/>， 并 在 失 焦 时 打 
印 出 当前 输入 内 容 ， 如 图 4-22 所 示 。 
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图 4-22 ”textarea 示例 


代码 如 下 : 





<view class="section"> 
<textarea bindblur="getValue" placeholder=" 请 输入 文案 " 
placeholder-class="textarea-holder"/> 
</view> 


.Section { font-size : 12px; padding : 10px Spx; border-bottom: dashed 1px #cecece 
.Section textarea { border : solid 1px #ccc; padding : 5px background-color: #fff,; 
.Section .textarea-holder { color : red; } 


Page( { 
getValue : function( e ) { 
// 由 于 没有 bindinput 可 以 用 blur 代 蔡 
console.log( e.detail.value ); 


} 
} ); 





















































使 用 <textarea/> 时 需要 注意 以 下 几 点 : 


. 微 信 6.3.30 中 ，<textarea/> 在 列表 尝 染 时 ， 新 增加 的 <textareay/> 在 自 
动 聚 焦 时 的 位 置 计 算 错 误 。 


:请 勿 在 scroll-view 中 使 用 <textarea/>。 


<textarea/> 的 blur 事 件 会 晚 于 页 面 上 的 tap 事 件 ， 如 果 雷 要 在 button 
的 点 击 事 件 获取 <textarea/>， 可 以 使 用 <form/> 的 bindsubmit。 





:不 建议 在 多 行文 本 上 对 用 户 的 输入 进行 修改 ， 所 以 <textarea/> 的 
bindinput 处 理 函 数 并 不 会 将 返回 值 反 映 到 <textarea/> 上 。 


4.4.10 ”button 组 件 


按钮 除了 在 应 用 中 提供 交互 功能 ， 按 钮 的 颜色 也 承载 了 应 用 的 引导 
作用 ， 通 常 在 一 个 程序 中 一 个 按钮 至 少 有 3 种 状态 : 默认 点 击 
Cdefault) 、 建 议 点 击 (primary) 、 谨 慎 点 击 (warn) 。 在 构建 项 目 
时 ， 注 意 在 合适 的 场景 使 用 合适 的 按钮 。 当 <button/> 被 <form/> 包 理 
时 ， 可 以 通过 设置 form-type 属 性 触发 表单 对 应 的 事件 ，<button/> 组 件 除 
了 系统 定制 的 几 种 类 型 ， 也 可 以 通过 在 标签 中 典 套 其 他 组 件 实现 自 定 义 
按钮 ， 其 属性 如 下 : 





“size: 表示 按钮 的 大 小 ， 有 效 值 为 default、mini， 默 认 值 为 


default。 


type: 按钮 的 样式 类 型 ， 有 效 值 为 primary、default、warn， 默 认 值 
为 default。 


:plain: 按钮 是 否 铁 空 ， 背 景色 透明 ， 默 认 值 为 false。 
disabled: 是 否 禁用 ， 默 认 值 是 false。 


-loading: 名 称 前 是 否 市 loading 图 标 ， 默 认 值 为 false。 通 常 在 表单 
提交 过 程 中 或 者 按钮 点 击 后 等 待 反 馈 时 ， 就 需要 打开 loading 让 用 户 有 感 
Xs 





form-type: 用 于 <form/> 组 件 ， 有 效 值 为 Submit、reset， 点 击 一 个 
位 于 <form/> 中 且 设 置 了 form-type 的 <button/ > 时， 会 触发 <form/> 的 
submit 事 件 或 reset 事 件 。 


-hover-class: 指定 按钮 按 下 去 的 样式 类 。 当 hover-class="none" 时 ， 
没有 点 击 态 效果 ， 默 认 值 为 button-hover。button-hover 的 默认 样式 为 
{background-color: rgba (0，0，0，0.1) ; opacity: 0.7}， 如 果 想 进行 
系统 级 修改 可 以 直接 履 盖 这 个 样式 。 


.hover-start-time: 按 住 后 多 和 久 出 现 点 击 态 ， 单 位 毫秒 ， 默 认 值 50。 


-hover-stay-time: 手指 松 开 后 点 击 态 保留 时 间 ， 单 位 晶 秒 ， 默 认 值 
400。 


button 大 部 分 属性 都 和 样式 有 关 ， 一 些 属性 外 的 特殊 样式 大 家 也 可 
以 通过 设置 wxss 来 实现 。 





我 们 在 下 面 的 示例 中 为 大 家 列举 了 按钮 不 同属 性 下 的 UI 状态 ， 如 图 
4-23 所 示 ，form-type 属 性 将 在 <form/> 章 节 的 示例 中 进行 演示 : 


代码 如 下 : 





<button> 默 认 按 钮 样式 </button> 
<button size="mini">size:mini</button> 
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图 4-23 ”button 示 例 





<button type="primary">type:primary</button> 
<button type="warn">type:warn</button> 
<button plain>plain</button> 
<button disabled>disabled</button> 
<button loading>loading</button> 
<1-- 按钮 按 下 去 后 会 变 成 红色 ”- -> 
<button hover-class="my-button-hover">hover-class:my-button-hover</button> 
<1-- 嵌 套 多 媒体 的 自 定义 按钮 - -> 
<button> 
<image src="http://img.zcool.cn/community/0196df5649343c6ac7251c9471d1ie1.gif"/> 
</button> 






































button { margin : 5px 0; } 
.my-button-hover { background-color: red; color : #fff; } 
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4.4.11 form 组 件 





<form/> 是 本 章 最 后 一 个 也 是 本 章 最 关键 的 一 个 组 件 ， 它 用 于 扔 套 
本 章 其 他 组 件 ， 使 之 形成 表单 。 当 触发 <form/>submit 方 法 时 ，<form/> 
能 将 组 件 内 用 户 输 入 的 <switch/>、<input/>、<checkbox/>、<slider/>、 
<radio/>、<picker/> 数 据 按 组 件 name 属 性 进行 组 装 ， 作 为 参数 传递 给 
submit 方 法 。 通 过 这 种 方式 ， 我 们 可 以 利用 <form/> 很 方便 地 获取 表单 数 
据 同 后 台 进 行 交互 。<form/> 有 以 下 属性 : 








:report-submit: 是 否 返 回 formId，formId 用 于 发 送 模板 消息 ， 默 认 
值 为 false。 


bindsubmit: 携带 form 中 的 数据 触发 的 submit 事 件 ， 与 <button/> 的 
form-type 属 性 配合 使 用 ，event.detail={value: {'name': "value'}， 
formId: "}。 





:bindreset: 表单 重 置 时 触发 reset 事 件 ， 与 <button/> 的 form-type 属 性 
配合 使 用 。 


下 面 的 示例 构建 了 一 个 简单 的 表单 ， 点 击 提交 投 钮 后 ， 控 制 台 会 打 
印 出 用 户 输 入 项 ， 如 图 4-24 所 示 。 
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图 4-24 ” ”form 示例 


代码 如 下 : 





<form bindsubmit="submit" bindreset="reset"> 
<view class="section"> 
<view class="title">switch</view> 
<switch name="myswitch"/> 
</view> 


<view class="section"> 

<view class="title">input</view> 

<input name="myinput" placeholder=" 请 输入 内 容 " value="{{textvalue}}"/> 
</view> 


<view class="section"> 
<view class="title">checkbox</view> 
<checkbox-group name="mycheckbox"> 





<label><checkbox value="1"/> 中 国 </label> 
<label><checkbox value="2"/> 美 国 </label> 
<label><checkbox value="3"/> 日 本 </label> 
</checkbox-group> 
</view> 


























<view class="section"> 
<view class="title">slider</view> 
<slider name="myslider" show-value/> 
</view> 


<view class="section"> 
<view class="title">radio</view> 
<radio-group name="myradio"> 
<label> 
<radio value="0"/> 男 
<radio value="1"/> 女 
</label> 
</radio-group> 
</view> 


<view class="section"> 
<view class="title">picker</view> 
<picker value="{{index}}" range="{{times}}" bindchange="changePicker"> 
<view> 
时 间 : {{times[index]}} 
</view> 
</picker> 
</view> 


<view class="section"> 
<button type="primary" form-type="submit"> 提 交 </button> 
<button form-type="reset"> 重 置 </button> 
</view> 
</form> 


























.Section { font-size: 12px; padding : 10px; border-top : solid 1pXx #eee; } 
.Section input { border : solid 1px #ccc; border-radius: 4px; } 

.Section button { margin-bottom : 1i0px; } 

.Section label { margin-right : 20px; } 

.Section .title{ margin: 5px 0; } 


Page( { 
data : { 
times : [ 
'20:00", 
'20:30', 
'21:00', 
'21:30', 
"22:00 


}, 

// 时 间 选 择 器 切换 时 ， 修 改 对 应 值 

changePicker : function( e ) { 
this.setData( { 

index : e.detail.value 


} ); 


// 点 击 提交 时 打印 当前 输入 数据 
submit : function( e ) { 
console.log( e.detail.value ); 


} 

// 重 置 表单 

reset : function( e ) { 
console.1og( ' 己 经 重 置 对 象 ' ) 


} 
} ); 









































4.5 “导航 组 件 


<navigator/> 是 小 程序 中 的 页 面 链 接 ， 其 作用 和 HTML 中 超 链 接 标签 
一 样 ， 主 要 控制 页 面 的 跳 转 。 链 接 内 容 可 以 是 一 个 字 、 一 个 词 或 者 一 
词 ， 也 可 以 是 一 幅 图 ， 你 可 以 点 击 这 些 内 容 来 跳 转 到 新 的 页 面 ， 
<navigator> 属 性 如 下 : 





: 应 用 内 路 转 链接 。 链 接地 址 为 需要 跳 转 页 面 的 相对 地 址 。 


Tedirect: 跳 转 行为 是 否 为 重 定向 ， 如 果 为 true， 则 跳 转 时 会 关闭 当 
前 页 面 。 默 认 值 为 false。 


.open-type: 可 选 值 navigate'、'Tredirect、'SswitchTab'， 对 应 于 
wx.navigateTo、wx.redirect-To、wx.switchTab 的 功能 ， 默 认 值 为 


navigate 。 


hover-class: 点 击 时 的 样式 类 ， 当 hover-class="none" 时 ， 没 有 点 击 
效果 。 默 认 值 为 navigator-hover。navigator-hover 默 认为 {background- 
color: rgba (0，0，0，0.1) ; opacity: 0.7; }，<navigator/> 子 节点 背 
景色 应 为 透明 色 。 


页 面 间 跳 转 可 以 通过 un 进行 参数 传递 ， 规 则 符合 URE 协 议 ， 新 页 面 
可 以 通过 注册 onLoad 方 法 获取 参数 ， 我 们 也 可 以 通过 redirect 和 ur 的 配 


合 实现 刷新 当前 页 面 ， 如 图 4-25 所 示 。 





navigator 页 面 代码 如 下 : 





<navigator url="../recevie/recevie?name=weixinapp&time=2016"> 

跳 转 到 其 他 页 面 

</navigator> 

<navigator url="../recevie/recevie?name=weixinapp" hover-class="myhover" redirect> 

重 定 向 到 其 他 页 画 

</navigator> 

<navigator url="../navigator/navigator?name=weixinapp" hover-class="myhover" redirerc 
刷新 当前 页 画 


</navigator> 
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图 4-25 navigator 页 面 


我 们 在 recevie 页 面 通 过 注册 onLoad 事 件 获取 传 入 的 参数 ， 如 图 4-26 
所 示 。 
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图 4-26 receive 页面 


recevie 页 面 如 下 : 





<view> 
name:{{query.name}},age:{{query.time}} 
</view> 


Page( { 
data : { 


query : {} 


onLoad : function( query ) { 
/* 框架 已 将 参数 转化 为 onLoad 参 数 */ 





this,data,query = query; 
this,setData( this.data ); 
} 
} ); 





一 些 简单 的 数据 可 以 通过 url 进行 传递 ， 但 一 些 较 为 复杂 的 数据 对 象 
就 需要 我 们 通过 架构 实现 。 


4.6 ” 巡 体 组 件 


4.6.1 image 





一 个 应 用 中 图 片 是 必 不 可 少 的， 就 像 HTML 提 供 了 <img/> 标 签 一 
样 ， 小 程序 提供 了 <image/> 组 件 。 小 程序 中 的 <image/> 除 了 可 以 显示 图 
片 外 ， 还 提供 了 图 片 的 裁剪 、 缩 放 模 式 属 性 ， 这 大 大 丰富 了 <image/> 的 
显示 能 力 。<image/> 默 认 宽 度 为 300px， 默 认 高 度 为 225px， 属 性 如 下 : 





src: 图 片 资 源 地 址 。 可 以 是 网 络 地 址 ， 也 可 以 是 本 地 图 片 的 相对 
地 址 。 


:mode: 图 片 的 裁 前 、 缩 放 模 式 。 默 认 值 为 “scaleToFEill”。 








-binderror: 当 错 误 发 生 时 ， 发 布 到 App Service 的 事件 名 ， 事 件 对 象 


event.detail={errMsg: 'Something wrong'}。 


:bindload: 当 图 片 载 入 完毕 时 ， 友 布 到 App Service 的 事件 名 ， 事 件 
对 象 event.detail={height: ' 图 片 高 度 px'"，width: ' 图 片 宽度 px'}。 


mode 属 性 有 一 共有 13 种 裁 蚤 模式 ， 其 中 4 种 是 缩放 模式 ，9 种 是 裁 
及 模式 。 


“缩放 模式 : 


.ScaleToFill: 不 保持 纵横 比 缩放 图 片 ， 使 图 片 的 宽 高 完全 拉 伸 至 填 


满 iImage 元 素 。 


"aspectFit: 保持 纵横 比 缩放 图 片 ， 使 图 片 的 长 边 能 完全 显示 出 来 。 
也 就 是 说 ， 可 以 完整 地 将 图 片 显 示 出 来 。 





“aspectFill: 保持 纵横 比 缩放 图 片 ， 只 保证 图 片 的 短 边 能 完全 显示 
出 来 。 也 就 是 说 ， 图 片 通常 只 在 水 平 或 垂直 方向 是 完整 的 ， 男 一 个 方 癌 
将 会 及 生 截取 。 








-widthFix: 宽度 不 变 ， 高 度 上 自动 变化 ， 保 持原 图 宽 高 不 变 ， 这 时 图 
片 原 有 高 度 样式 会 失效 。 


` 裁 前 模式: 

top: 不 缩放 图 片 ， 只 显示 图 片 的 顶部 区 域 。 
bottom: 不 缩放 疼 片 ， 只 显示 图 片 的 底部 区 域 。 
center: 不 缩放 图 片 ， 只 显示 图 片 的 中 间 区 域 。 
left: 不 绾 放 图 片 ， 只 显示 图 片 的 左边 区 域 。 


-right， 不 缩放 图 片 ， 只 显示 图 片 的 右边 区 域 。 


top left: 不 缩放 图 片 ， 只 显示 图 片 的 左上 边区 域 。 
top right: 不 缩放 图 片 ， 只 显示 图 片 的 右上 边区 域 。 
bottom left: 不 缩放 图 片 ， 只 显示 图 片 的 左下 边区 域 。 
-bottom right: 不 缩放 图 片 ， 只 显示 图 片 的 右 下 边区 域 。 


图 4-27 使 用 一 张 原 图 大 小 为 720pxx450px 的 图 ， 和 大 小 为 
300pxx300px 的 image 组 件 为 大 家 展示 不 同 模式 下 的 显示 效果 。 





a) 原 图 





c)aspectFit 


b ) scaleToFill 





e) idthFix 


d) aspectFill 


图 4-27 _ image 组 件 不 同 模式 的 效果 图 





g) ottom 


3 


Px 





k) top left 


j) right 


图 4-27 ”( 续 ) 





1) top right m) bottom left 





n) bottom right 


图 4-27 ”( 续 ) 


4.6.2 audio 


小 程序 运行 在 页 面 中 直接 舱 入 的 音频 组 件 ， 官 方 系统 为 其 提供 了 一 
套 默认 的 组 件 样式 ， 我 们 也 可 以 通过 修改 属性 或 调用 API 封 装 自 己 的 音 
频 UJI 组 件 ，<audio/> 属 性 如 下 : 


src: 要 播放 音频 的 资源 地 址 。 可 以 是 网 络 音频 地 址 或 本 地 音频 文 
件 相 对 路 径 。 


-loop: 是否 循环 播放 ， 默 认 值 为 false。 
:controls: 是 人 否 显示 默认 控件 ， 默 认 值 为 true。 


:poster: 默认 控件 上 的 音频 封面 的 图 片 资源 地 址 ， 如 果 controls 属 性 
值 为 false 则 poster 无 效 。 


.name: 默认 控件 上 的 音频 名 字 ， 如 果 controls 属 性 值 为 false 则 name 
无 效 。 默 认 值 为 “未 知音 频 ”。 








author: 默认 控件 上 的 作者 名 字 ， 如 果 controls 属 性 值 为 false 则 
author 无 效 。 默 认 值 为 “未 知 作 者 ”。 


:binderror: 当 发 生 错 误 时 触发 error 事 件 ，detail={errMsg: 


MediaError.code}。 MediaError.code 有 以 下 类 型 . 


.MEDIA_ERR_ABORTED: 获取 资源 被 用 户 禁 
.MEDIA_ERR_NETWORD: 网 络 错误 。 
.MEDIA_ERR_DECODE: 解码 错误 。 
.MEDIA_ERR_SRC_NOT_SUPPOERTED: 不 合适 资源 。 
bindplay: 当 开 始 /继续 播放 时 触发 play 事 件 。 

bindpause: 当 暂 停 播放 时 触发 pnause 事 件 。 


:bindtimeupdate: 当 播 放 进 度 改 变 时 触发 timeupdate 事 件 ，detail= 


{currentTime, duration}。 


:bindended: 当 播 放 到 末尾 时 触发 ended 事 件 。 





默认 的 <audio/> 样 式 就 是 我 们 在 微 信 朋友 圈 中 常见 的 样式 ， 如 图 4- 
28 所 示 。<audio/> 播 放 等 功能 需要 配合 API 实 现 ， 有 具体 可 参考 API 音 乐 播 


放 草 节 。 
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图 4-28 ”系统 默认 控件 


代码 如 下 : 





<audio poster="{{myaudio.poster}}" src="{{myaudio,.src}}" 
name="{{myaudio.name}}" author="{{myaudio.author}}" 
controls loop action="{{myaudio.action}}"> 




















</audio> 
Page( { 
data : { 
myaudio : { 
src : './resource/qilixiang.mp3', 
poster : 'http://www.yoka.com/dna/pics/ba1lc1117/42/d3551iecici7cadcddc1.jpg', 
name : ' 七 里 香 '， 
author : ' 周 杰 伦 ' 
} 
} 
} ); 


4.6.3 video 


小 程序 中 人 允许 我 们 简单 租 入 视频 ， 和 audio 组 件 相 比 ， 它 能 提供 的 
属性 少 了 很 多 ， 只 能 设置 视频 源 ， 监 听 加 载 错 误 ， 这 样 几 乎 不 能 对 
video 组 件 做 什么 操作 。<video/> 默 认 宽 度 为 300pX， 高 度 为 225px， 属 性 
如 下 : 





src: 要 播放 视频 的 资源 地 址 。 


controls: 是 侣 显示 默认 播放 控件 〈 播 放 /暂停 按钮 、 播 放 进 度 、 时 
间 ) ， 默 认为 true。 


-danmu-list: 弹 幕 列表 。 





.danmu-btn: 是 否 显示 弹 幕 按钮 ， 只 在 初始 化 时 有 效 ， 不 能 动态 变 
更 ， 默 认为 false。 





enable-danmu: 是 否 展 示 弹 幕 ， 只 在 初始 化 时 有 效 ， 不 能 动态 变 
更 ， 默 认为 false。 


-autoplay: 是 否 上 自动 播放 ， 默 认为 false。 


:bindplay: 当 开 始 / 继 续 播 放 时 触发 play 事 件 。 


-bindpuase: 当 和 暂停 播放 时 触发 pause 事 件 。 
:bindended: 当 播 放 到 末尾 时 触发 ended 事 件 。 


'bindtimeupdate: 播放 进度 变化 时 触发 ，event.detail= 
{currentTime: “当前 播放 时 间 ]}。 触 发 频率 应 该 在 250ms 一 次 。 


“objectFit: 当 视 频 大 小 与 video 容 器 大 小 不 一 致 时 ， 视 频 的 表现 形 
式 。contain: 包含 ，fill: 填充 ，cover: 轿 盖 ， 默 认 值 为 contain 。 


vicle 示 例如 图 4-29 的 所 示 。 
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图 4-29 ”video 示 例 


代码 如 下 : 





<view class="video"> 
<video id="myVideo" src="{{src}}" danmu-list="{{danmu}}" enable-danmu 
controls></video> 
<view class="action"> 
<button bindtap="getVideo"> 获 取 视 频 </button> 
<view class="danmu"> 
<input type="text" value="{{danmuText}}" bindblur="setInputValue"/> 
<button bindtap="sendDanmu"> 发 送 弹 幕 </button> 
</view> 
</view> 
</view> 





.Video video { width : 100%;height : 562.5rpx; } 

.Video .action { padding : 20rpx; } 

.Video .action .danmu { margin-top: 10px; position: relative; padding-right 
210rpx; height : 80rpx; } 

.Video .action .danmu input { border : solid 1px #ccc; height : 80rpx; padding : 
© 10rpx; border-radius: 3px;} 

.Video .action .danmu button { width : 200rpx; position: absolute; right : 90; 
bottom : 0; height : 80rpx; } 


Page( { 
data : 
src : 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=3028020101( 
// 设 置 弹 幕 
danmu : [{€ 
text : ' 第 1s 出 现 的 弹 幕 '， 
color : "#ff0000 '， 
time : 1 














} 





, 

text : ' 第 2s 出 现 的 弹 幕 '， 
color : '#00ff00", 
time : 2 


} 
]， 


danmuText : "' 
】 
onReady : function() { 
// 获 取 videon 上 下 文 videoContext 对 象 
this.videoContext = wx.createVideoContext( 'myVideo' ); 





}, 
getVideo : function() { 
Var self = this; 
// 从 本 地 或 相机 选择 视频 
wx.chooseVideo( { 
success : function( res ) { 
self.setData( { 
maxDuration : 60, 
src : res.tempFilepath 


} ); 
} 
} ); 
了 
SetInputValue : function( e ) { 
// 同步 数据 
this.setData( { 
danmuText : e.detail.value 


a 
7/ 发 送 弹 莫 


sendDanmu : function() { 
var danmuText = this.data.danmuText; 
console.log( this.videoContext ); 
this.videoContext.sendDanmu( { 
text : danmuText, 
color : '#ff0O000' 


} ); 

// 发 送 弹 幕后 清空 输入 机 

this.setData( { 
danmuText : "! 


} ); 
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的 是 <video/> 组 件 不 能 在 <scroll-view/> 中 使 用 。 


4.7 地 图 组 件 


移动 应 用 中 地 图 是 必 不 可 缺 的 内 容 ， 通 过 地 图 我 们 可 以 很 直观 地 表 
现 出 地 理 信息 ， 为 此 小 程序 提供 了 <map/> 组 件 和 定位 相关 的 API。 本 小 
节 主 要 讲解 <map/> 组 件 ， 它 主要 负责 展示 性 的 功能 ， 地 理 位 置 的 获取 将 
在 后 续 API 中 讲解 。 由 于 需要 适 配 三 端 ， 在 小 程序 中 我 们 不 能 使 用 
<map/> 组 件 以 外 的 地 图 插件 ， 如 高 德 地 图 、 百 度 地 图 ， 经 过 几 次 发 版 
后 ， 目 前 小 程度 地 图 组 件 正 能 满足 大 部 分 需求 。 





小 程序 中 的 <map/> 组 件 主要 负责 地 理 位 置信 息 的 简单 展示 ， 它 没有 
百度 地 图 、 高 德 地 图 那样 丰富 的 API， 目 前 地 图 具备 绘制 图 标 、 路 线 、 
半径 等 能 力 ， 在 <scroll-vitw/> 中 不 能 使 用 <map/> 组 件 ， 组 件 属性 如 下 : 


:]atitude: 中 心 纬度 。 
:longitude: 中 心经 度 。 


.Scale: 缩放 级 别 ， 默 认为 16。 





:markers: 标记 点 ， 用 于 在 地 图 上 显示 标记 的 位 置 ， 不 能 自 定义 图 
标 和 样式 ， 每 个 标记 点 属性 如 下 : 





id: 标记 点 id，marker 点 击 事件 回调 会 返回 此 id。 


:latitude: 纬度 ， 浮 点 数 ， 范 围 -90 一 90， 必 填 项 。 
:longitude: 经 度 ， 浮 上 点数， 范围 -180 一 180， 必 填 项 。 
title: 标注 点 名 。 


iconPath: 显示 的 图 标 ， 项 目 目录 下 的 图 片 路 径 ， 文 持 相 对 路 径 写 
法 ， 必 填 项 。 


rotate: 旋转 角度 ， 顺 时 针 旋转 的 角度 ， 范 围 0 一 360， 默 认为 0. 
alpha: 标注 的 透明 度 ， 默 认 1， 无 透明 。 

“width: 标注 图 标 宽度 ， 黑 认为 图 片 实际 宽度 。 

-height: 标注 图 标 蜗 度 ， 默 认为 图 片 实际 蜗 度 。 


.polyline: 路 线 ， 指 定 一 系列 坐标 点 ， 从 数组 第 一 项 连 线 至 最 后 一 
项 ， 数 组 元 素 属 性 如 下 : 


:points: 经 纬度 数组 ， 如 : [{latitude: 0，longitude: 0}]， 必 填 项 。 


:color: 线 的 颜色 ，8 位 十 六 进 制 表 示 ， 后 两 位 表示 alpha 值 ， 如 : 
#000000AA。 


-width: 线 的 宽度 。 


-dottedLine: 是 否 为 虚线 ， 默 认为 false。 

circles: 圆 ， 数 组 类 型 ， 在 地 图 上 显示 圆 ， 数 组 元 素 属 性 如 下 : 
latitude: 纬度 ， 浮 点 数 ， 范 围 -90 一 90， 必 填 项 。 

longitude: 经 度 ， 浮 点 数 ， 范 围 -180 一 180 必 填 项 。 


color: 描 边 的 颜色 ，8 位 十 六 进 制 表示 ， 后 两 位 表示 alpha 值 ， 如 : 
#000000AA。 


fillColor: 填充 颜色 ，8 位 十 六 进 制 表 示 ， 后 两 位 表示 alpha 值 ， 
如 : #000000AA。 


:radius: 半径 ， 必 填 项 。 
.StrokeWidth: 描 边 的 宽度 。 


:controls: 控件 。 





id: 控件 id， 在 控件 点 击 事件 回调 会 返回 此 id。 


:position: 控件 在 地 图 的 位 置 ， 控 件 相 对 地 图 位 置 ， 必 填 项 ， 
position 元 素 属性 如 下 : 


left: 距离 地 图 的 左边 界 多 远 ， 默 认为 0。 





top: 距离 地 图 的 上 边界 多 远 ， 默 认为 0。 

width: 控件 宽度 ， 默 认为 图 片 宽度 。 

height: 控件 高 度 ， 默 认为 图 片 高 度 。 

iconPath: 显示 的 图 标 ， 相 对 应 用 根 目录 路 径 的 图 片 ， 必 填 项 。 
clickable: 是 否 可 点 击 ， 默 认 不 可 点 击 。 


"include-points: 缩放 视野 以 包含 所 有 给 定 的 坐标 点 。 





.Show-location: 显示 带 有 方 问 的 当前 定位 点 。 


:bindmarkertap: 点 击 标记 点 时 触发 。 





:bindcontroltap: 点 击 控件 时 触发 。 
:bindregionchange: 视野 发 生变 化 时 触发 。 
:bindtap: 点 击 地 图 时 触发 。 


在 下 面 示例 中 ， 我 们 使 用 两 个 marker 标 记 起 始 位 置 和 结束 位 置 ， 用 
polyline 绘 制 路 线 ， 然 后 通过 controls 创 建 了 一 个 按钮 ， 如 图 4-30 所 示 。 
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图 4-30 ”地 图 示例 


代码 如 下 : 





<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" circles="{{circles}} 


Page({ 
data: { 
latitude: 30.5491861989, 
longitude: 104.0680165911, 
scale : 5, 
// 设置 标记 点 
markers: [ 
{iconPpath: "./images/flag.png",id: 0,1latitude: 30.5491861989, 
lJongitude: 104.0680165911,width: 30,height: 30}, 
{iconPpath: "./images/flag.png",id: 1,1latitude: 30.5468832218, 
longitude: 104.0568588833,width: 30,height: 30} 


]， 
// 设置 路 线 
polyline: [{ 





// 按 顺 序 设 


5 个 点 




















points: [ 


{longitude: 
{longitude: 
{longitude: 
{longitude: 


], 

color: "#0000 
width: 2, 
dottedLine: 





到 


}],. 
// 设置 2 个 








标 








controls: [{ 


}) 


id: 1,iconPath 


ffDD", 


true 


: './images/location.png', 


104.0680165911, latitude: 
104.0687752749, latitude: 
104.0688698344, latitude: 
104.0568588833, latitude: 


30.5491861989}, 
30.5493485980}, 
30.5470634483}, 
30.5468832218} 


position: {left: 0,top: 250,width: 30,height: 30}, 


clickable: tru 


}] 





e 


}, 
// 地 图 发 生变 化 时 触发 











regionchange(e) 


{ 


// type 可 以 区 分 是 开始 拖 动 还 是 结束 拖 动 


console.1log(e. 











type) 


} 
// 标记 点 点 击 时 触发 


markertap(e) 


// 根据 标记 点 markerId 区 分 
console.log(e.markerId) 


}, 


// 点 击 controls 设 
controltap(e) { 








置 的 图 标 





// 通过 markerId 区 分 按钮 
console.log(e.controlId) 














} 





4.8 画布 组 件 


<canvas/> 主 要 用 于 绘制 图 形 ， 在 页 面 上 放置 一 个 <canvas/>， 就 相 
当 于 在 页 面 放置 了 一 块 “画布 "， 可 以 在 其 中 进行 图 形 绘制 。<canvas/> 组 
件 是 一 块 无 色 透 明 区 域 ， 本 身 并 没有 绘制 能 力 ， 它 仅仅 是 图 形容 器 ， 需 
要 调用 相关 API 来 完成 实际 的 绘图 任务 ， 本 章 主 要 讲解 <canvas/> 组 件 ， 
相关 API 在 后 续 章 节 中 讲解 。 


<canvas/> 组 件 默认 宽度 300px， 高 度 225px， 同 一 页 面 中 的 canvas-id 
不 能 重复 ， 如 果 使 用 一 个 已 经 出 现 过 的 canvas-id， 该 <canvas/> 组 件 对 应 
的 画布 将 被 隐藏 并 不 再 正常 工作 ， 需 要 注意 的 是 请 勿 在 <scroll-view/> 中 
使 用 <canvas/>。 其 属性 如 下 : 





:canvas-id: canvas 组 件 的 唯一 标识 符 。 


disable-scroll: 当 在 canvas 中 移动 时 ， 禁 止 屏 幕 滚动 以 及 下 拉 刷 
新 ， 默 认为 false。 


:bindtouchstart: 手指 触摸 动作 开始 。 


:bindtouchmove: 手指 触摸 后 移动 。 


:bindtouchend: 手指 触摸 动作 结束 。 


:bindtouchcancel: 手指 触摸 动作 被 打 断 ， 如 来 电 提 醒 、 弹 窗 。 





'bindlongtaop: 手指 长 按 500ms 之 后 触发 ， 触 发 了 长 按 事件 后 进行 
移动 不 会 触发 屏幕 的 滚动 。 


:binderror: 当 发 生 错 误 时 触发 error 事 件 ，detail= 


{errMsg: 'something wrong '}。 





canvas 组 件 本 身 没 有 太 多 展示 的 点 ， 这 里 我 们 简单 结合 API 为 大 家 
初步 演示 canvas 绘 图 能 力 ， 具 体 绘 图 API 参 考 后 面 章节 ， 示 例如 图 4-31 所 


人 钞 。 





动作 ”帮助 微 信 开 发 者 工具 0.10.102800 一 XX 


和 Phone 4 wih 





图 4-31 ” canvas 示例 


代码 如 下 : 


[x Console : 


© YY top 


asdf 





<canvas canvas-id="myCanvas" style="width : 100%;height : 300px;"></canvas> 


Page( { 
onReady : function() { 
// 获取 绘图 上 下 文 
var context = wx.createContext(); 














context.setSstrokestyle( "#0000ff" ); // 设 






































context .setLinewidth( 5 ); // 设置 线条 宽度 
context,rect(3，2，150，200); // 添加 一 个 矩阵 
context .stroke()， // 对 当前 路 径 进行 描 边 


















































// 绘制 图 像 
wx.drawCanvas( { 
canvasId : 'myCanvas', 
actions : context.getActions() 
} ); 


console.log( 'asdf' ); 


4.9 客服 会 话 





<contact-button/> 用 于 在 页 面 上 显示 一 个 客服 会 话 按 钮 ， 用 户 点 击 后 
会 进入 客服 会 话 ， 客 服 会 话机 制 需要 后 台 系 统 配合 ，<contactrbutton/> 仅 
仅 作 为 一 个 展示 组 件 ， 目 前 <contact-button/> 能 力 有 限 ， 仅 能 设置 大 小 和 
图 标 颜 色 ， 其 属性 如 下 : 


“size: 会 话 按钮 大 小 ， 有 效 值 为 18 一 27， 单 位 px， 默 认 值 为 18。 


type: 会 话 按钮 的 样式 类 型 ， 有 效 值 为 default-dark、default-light， 
默认 值 为 default-dark。 


“session-from: 用 户 从 按钮 进入 会 话 时 ， 开 发 者 将 收 到 市 上 本 参数 
的 事件 推送 。 本 参数 可 用 于 区 分 用 户 进 入 客服 会 话 的 来 源 。 


<contact-button/> 使 用 非常 简单 ， 示 例如 图 4-32 所 示 。 在 WXML 中 与 
入 标签 即 可 唤醒 会 话 ， 而 客服 会 话 中 的 功能 则 需要 后 台 对 接 ， 具 体 参 考 
5.8.5 节 “客服 消息 ”。 


下 午 2:25 
书籍 编写 demo 


客服 合 话 





图 4-32 ”客服 会 话 


代码 如 下 : 





<contact-button session-from="yoursession" style="margin : 100rpx;"> 
</contact-button> 





4.10 ”小 结 


本 章 对 小 程序 组 件 进行 了 相应 的 介绍 ， 这 些 组 件 能 满足 大 部 分 开发 
需求 ， 在 学 习 过 程 中 ， 大 家 需要 掌握 每 个 组 件 的 特性 ， 在 项 目 中 灵活 应 
用 ， 一些 如 媒体 、 地 图 、 男 布 等 组 件 的 个 别 功 能 需要 配合 API 使 用 ， 相 
关 API 将 在 接 下 来 的 革 市 中 进行 介绍 。 

















第 5 草 API 


上 一 章 为 大 家 介绍 了 小 程序 组 件 的 使 用 ， 运 用 这 些 组 件 我 们 可 以 完 
成 很 多 我 们 需要 的 UI 界面 ， 但 小 程序 的 一 些 功 能 就 要 依赖 框架 提供 的 
API 来 完成 。 本 章 主 要 讲解 小 程序 提供 的 API， 包 括 网 络 、 媒 体 、 文 
件 、 数 据 缓存 、 人 位置、 设备、 界面、 开放 接口 8 大 类 ， 这 些 API 由 短信 本 
喘 提 供 ， 通 过 逻辑 层 JS 代 码 进行 调用 。 





在 学 习 小 程序 API 之 前 ， 先 介绍 小 程序 API 在 定义 和 使 用 上 的 一 些 
通用 规则 。 一 般 来 说 ， 微 信和 API 按 命名 规则 可 分 为 两 种 : 


:以 wx.on 开 头 的 API， 如 : wx.onSockectOpen、 
wx.onBackgroundAudioPlay () 、wx.on-Com-passChange () 等 ， 均 代 
表 监 听 某 个 事件 发 生 的 API 接 口 ， 这 类 接口 一 般 来 说 参数 均 为 一 个 
callback 回 调 函 数 ， 当 该 事件 触发 时 ， 会 回调 callback 函 数 。 


.其 他 不 以 wx.on 开 头 的 API， 如 : wx.request、wx.uploadFile、 
wx.chooseImage， 这 类 接口 如 果 没 有 特殊 约定 ， 通 常 都 接受 一 个 Object 
对 象 作为 参数 ， 在 Object 中 可 以 指定 success、fail、complete 来 接收 接口 
调用 结果 ， 这 三 个 回调 函数 在 有 些 API 中 具有 返回 值 ， 有 些 没有 。 


两 种 调用 方式 如 下 : 








// 以 wx,on 开 头 

wx.onSocketOpen( function( res ) { 
console.1l0g( 'WebSocket 连 接 已 打开 ' ); 
} ); 


// 不 以 wx .on 开头 
wx.request( { 
/* 接口 调用 成 功 */ 
success : function() {}, 
/* 接口 调用 失败 */ 
fail : function() {}, 
/* 接口 调用 结束 (调用 成 功 、 失 败 都 会 执行 */ 
complete : function() {} 
} ); 


一 







































































5.1 网 络 


每 个 微 信 小 程序 需要 事先 设置 一 个 通信 域名 ， 小 程序 可 以 跟 指 定 的 
域名 进行 网 络 通 信 。 包 括 不 同 HTTPS 请 求 (wx.request) 、WebSocket 通 
信 (wx.connectSocket) 、 上 传 文件 (wx.uploadFile〉 和 下 载 文件 

Cwx.downloadFile) 。 设 置 通信 域名 需要 登录 小 程序 “后 台 -> 设 置 -> 开 
发 设置 ，* 在 服务 器 配置 中 添加 受信 任 的 域 。 














5.1.1 发 起 HTTPS 请 求 


wx.request (Object) 


request 用 于 发 起 HITPS 请 求 ， 默 认 超时 时 间 和 最 大 超时 时 间 都 是 60 
秒 。 在 小 程序 中 只 能 使 用 HTTPS 请 求 不 能 使 用 HTTP 请 求 ， 一 个 微 信 小 
程序 ， 同 时 只 能 有 5 个 网 络 请 求 连接 。Object 参 数 属性 如 下 : 


url: 后 台 服 务 器 接口 地 址 ，url 不 能 有 端口 必 填 项 。 
.data: 请 求 的 参数 。 


:header: 设置 请 求 的 header，header 中 content-type 默 认 
为 'application/json'，header 中 不 能 设置 referer，referer 格 式 固 定 
为 https:/servicewechat.comy/{fappid}/{version}/page-frame.html ， 其 中 
{appid} 为 小 程序 的 appid，{version} 为 小 程序 的 版 本 号 ， 版 本 号 为 0 表示 
为 开发 版 。 














:method: HTTPS 请 求 方法 类 型 ， 默 认为 GET， 有 效 值 有 : 
OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、 
CONNECT，method 有 效 值 必须 为 大 写 。 


dataType: 默认 为 json。 如 果 设 置 了 dataType 为 json， 则 会 尝试 对 啊 


应 的 数据 做 一 次 JSON.parse。 


Success: 收 到 服务 器 成 功 返回 的 回调 函数 ，res={data: ' 开 发 者 服 
务 器 返回 的 内 容 '}。 


fail: 接口 调用 失败 的 回调 函数 。 

complete: 接口 调用 结束 的 回调 函数 《调用 成 功 、 失 败 都 会 执 
行 7 8 

data 数 据 最 终 发 送 给 服务 器 的 数据 是 String 类 型 ， 如 果 传 入 的 data 不 


是 String 类 型 ， 则 会 被 转化 成 String。 转 化 规则 如 下 : 


1) 对 于 header['content-type'] 为 'application/json' 的 数据 ， 会 对 数据 进 
行 JSON 序 列 化 。 


2) 对 于 header['content-type'] 为 'application/x-www-form- 
urlencoded' 的 数据 ， 会 将 数据 转换 成 query 
string (encodeURIComponent (k) =encodeURIComponent (v) 


&encodeURIComponent (k) =encodeURIComponent (v) ...) 


示例 代码 如 下 : 





wx.request( { 
Url : 'https://www.dmall.com', 
header: 
'Content-Type': 'application/json' 


村 
success : function( e ) { 


console.1og( e ); 


过 
complete : function 


() i 
console.1og( ' 无 论 成 功 失败 都 会 执行 ' ) ; 
} ); 








对 于 request 方 法 有 以 下 注意 项 : 
.开发 者 工具 0.10.102800 版 本 ，header 的 content-type 设 置 异 各 。 


:客户 端的 HTTPS TLS 版 本 为 1.2， 但 Android 的 部 分 机 型 还 未 支持 
TLS 1.2， 所 以 请 确保 HTTPS 服 务 器 的 TLS 版 本 支持 1.2 及 以 下 版 本 。 


5.1.2 ” 上传、 下 载 


1.wx.uploadFile 《Object ) 


上 节 中 提 到 的 request 仅 用 于 与 服务 端 进行 简单 通信 ， 如 需 提 交 带 有 
本 地 资源 的 数据 ， 便 需要 调用 此 接口 将 本 地 资源 上 传 到 指定 服务 器 。 调 
用 这 个 uploadFile 时 ， 客 户 端 会 同 服 务 端 发 起 一 个 HTTP POST 请 求 ， 
header 中 Content-Type 为 multipart/form-data。 上传 文 件 最 大 并 发 限制 为 10 
个 ， 默 认 超时 时 间 和 最 大 超时 时 间 都 是 60 秒 ，Object 参 数 属性 如 下 : 





url: 开发 者 服务 器 url， 必 填 项 。 
-filePath: 要 上 传 文件 资源 的 路 径 ， 必 填 项 。 


name: 文件 对 应 的 key， 开 发 者 在 服务 端 通过 这 个 key 可 以 获取 到 
文件 的 二 进 制 内 容 ， 必 填 项 。 


:header: 设置 请 求 的 header，header 中 不 能 设置 referer，referer 格 式 
定 为 https://servicewechat.com/{appid}/{version}page-frame.html ， 其 
中 {appid} 为 小 程序 的 appid，{version} 为 小 程序 的 版 本 号 ， 版 本 号 为 0 表 
示 为 开发 版 。 











:formData: HTTP 请 求 中 其 他 额外 的 请 求 数据 。 


Success: 收 到 服务 器 成 功 返 回 的 回调 函数 ，success 返 回 参 数 属性 
如 下 : 


-data: 开发 者 服务 器 返回 的 数据 。 
:statusCode: HTTP 状 态 人 码 。 
:fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 

















wx.chooseImage({ // 调用 选中 图 片 接 
success : function( res ) 
var tempFilePaths = res.tempFilePaths; // 获取 临时 图 片 地 址 
wx.uploadFile( { 
Url : 'http://www.myserver.com', 
filtPath : tempFilepaths[0], 
name : 'myFile', 
formData : { // 其 他 数据 
'otherData' : 'value' 






































Success : function( response ) { 
var data = response.data; // 服务 器 返回 数据 


} 

} ); 
} 
}); 




















2.wx.downloadFile (Object) 





从 服务 端 下 载 资源 到 本 地 。 调 用 API 后 ， 客 户 端 直接 发 起 一 个 HTTP 
GET 请 求 ， 把 文件 下 载 到 本 地 并 返回 文件 的 本 地 临时 路 径 ， 临 时 文件 在 





小 程序 本 次 启动 期 间 可 以 正常 使 用 ， 如 需 持 久保 存 ， 需 要 主动 调用 
wx.saveFile 进 行 保存 。 下 载 文件 文件 最 大 并 发 限制 为 10 个 ， 默 认 超 时 时 
间 和 最 大 超时 时 间 都 是 60s，Object 参 数 属性 如 下 : 





url: 下 载 资源 的 URL， 必 填 项 。 


:header: 设置 请 求 的 header，header 中 不 能 设置 referer，referer 格 式 
定 为 https://servicewechat.com/{appid}/{version}/page-frame.html ， 其 
中 {appid} 为 小 程序 的 appid，{version} 为 小 程序 的 版 本 号 ， 版 本 号 为 0 表 
示 为 开发 版 。 











.Success: 收 到 服务 器 成 功 返 回 的 回调 函数 ，res={ftempFilePath: ' 文 
件 临 时 路 径 ?。 文 件 临 时 路 径 在 小 程序 局 动 期 间 可 以 正常 使 用 ， 如 需 持 
和 久保 存 ， 需 要 主动 调用 wx.saveFile 方 法 ， 这 样 才能 保证 小 程序 下 次 局 动 
时 也 能 访问 。 











fail: 接口 调用 失败 的 回调 函数 。 


:complete， 接 口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 
行 ) 。 


示例 代码 如 下 : 





wx.downloadFile( { 
url : 'http://www.myserver.com'，// 接口 地 址 
sucess : function( res 
wx.getImageInfo( { // 下 载 图 片 资 源 后 读 取 其 信息 。 
src : res.tempFIlePaths[0]， 
































success : function( info ) { 
console,1og( info.width + ',' + info.height ); 


} 
} ); 


} 
} ); 
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5.1.3 WebSocket 


上 上 节 中 介绍 的 网 络 通信 方法 都 是 通过 客户 端 主动 向 服务 端 发 起 请 
求 ， 由 服务 端 响 应 返回 数据 来 达到 通信 的 目的 ， 这 种 方式 有 个 缺点 ， 不 
能 实现 服务 端 主动 向 客户 端 推送 消息 。 采 用 这 种 短 连 接 方式 实现 客户 端 
和 服务 端 之 间 的 即时 通信 技术 只 能 使 用 轮 询 ， 即 在 特定 时 间 间 隔 〈 如 每 
1 秒 ) ， 由 客 尸 端 癌 服务 端 发 起 请 求 ， 然 后 由 服务 端 返 回 最 新 的 数据 。 
这 种 方式 需要 客户 端 要 不 断 的 向 服务 端 发 出 请 求 ， 在 处 理 即 时 通信 时 ， 
这 种 方式 既 浪费 性 能 又 占 带 宽 。 面 对 这 种 情况 ， 在 需要 即时 通信 时 ， 我 
们 可 以 利用 小 程序 提供 的 WebSocket 相 关 API 创 建 WebSocket， 实 现 长 连 
接 达 到 即时 通信 的 目的 。 长 连接 服务 端 比 短 连接 更 耗资 源 ， 在 技术 选项 
上 要 慎重 。 








1.wx.connectSocket (Object) 


创建 一 个 WebSocket 连 接 。 一 个 小 程序 同时 只 能 有 一 个 WebSocket 
连接 ， 创 建新 连接 时 ， 如 果 当 前 已 存在 一 个 WebSocket 连 接 ， 会 自动 关 
闭 该 连接 ， 并 重新 创建 一 个 新 的 WebSocket 连 接 ， 创 建 连接 时 默认 和 最 
大 超时 时 间 都 是 60 秒 。Object 参 数 如 下 : 


url: 服务 器 接口 地 址 。 必 须 是 WSS 协 议 ， 且 域名 必须 是 后 台 配 置 
的 合法 域名 ， 必 填 项 。 


data: 请 求 的 数据 。 
:header: 参考 5.1.1 节 。 


.method: 请 求 方式 ， 默 认为 GET， 有 效 值 为 : OPTIONS、GET、 
HEAD、POST、PUT、DELETE、TRACE、CONNECT， 非 必 填 项 。 


.Success: 接口 调用 成 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 
-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 、 失 败 都 会 执行 ) 。 


示例 代码 如 下 : 





wx.connectSocket( { 
url : 'Wss://www.myserver.com'，// 服务 端 需要 实现 Socket 监 听 
data : { 
myData : 'data' 





}, 
header : 
'Content-Type' : 'application/json' // 可 以 不 设 























}, 
method : 'get' 
} ); 





2.wx.onSocketOpen (callback) 


监听 WebSocket 连 接 打开 事件 。 


示例 代码 如 下 : 





wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 





} ) 


WX. onSocketOpen( er res ) { 
console.1og( 'socket 连 接 已 打开 ' )， 


} ); 











3.wx.onSocketError (callback) 


监听 WebSocket 错 误 。 


示例 代码 如 下 : 








wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 


} ); 


wx.onSocketOpen( function( res ) { 
console.10g( 'socket 连 接 已 打开 ' )， 
} ); 


wx.onSocketError( function( res ) { 
console.1og( “连接 打开 失败 。' )， 


本 




















4.wx.sendSocketMessage (callback) 





通过 WebSocket 连 接 发 送 数 据 ， 需 要 先 通过 wx.connectSocket 连 接 后 
人 台 ， 并 在 wx.onSocketOpen 回 调 之 后 才能 发 送 。Object 参 数 属性 如 下 : 


-data: 需要 发 送 的 内 容 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





Var Socketopen = false; 
var socketMsgQueue = []; 


wx.connectSocket( { // 创建 连接 
Url : 'wss://www.myserver.com', 


} ); 


wx.onSocketOpen( function( res ) { // 监听 连接 打开 
socketOpen = true; 
// 连接 打开 后 先 处 理 之 前 栈 中 的 数据 
for ( var i = 0, msg; msg = socketMsgQueue[il]; ++i ) { 
sendMsg( msg ); 




















socketMsgQueue =[]; 


} ); 


function sendMsg( msg ) { 
// 如 果 连 接 在 请 求 中 还 未 打开 ， 先 将 数据 压 入 信息 栈 中 
if ( !socketOpen ) { 
socketMsgQueue.push( msg ); 
return; 

















// 如 果 连 接 已 打开 ， 直 接 发 送 数据 
wx.sendSocketMessage( { 
data : msg 


} ); 
} 








sendMsg( { myName : 'weixin' } ); 





5.WX.0nSocketMessage (callback) 


监听 WebSocket 接 收 到 服务 器 的 消息 事件 。callback 返 回 参数 为 
data， 是 服务 器 返回 的 消息 。 


示例 代码 如 下 : 





wx.connectSocket( { 
Url : 'wss://www.myserver.com’ 


} ); 


wx.onSocketMessage( function( res ) { 


console.1og( ' 收 到 服务 器 内 容 : ' + res.data ); 
} ); 





6.wx.closeSocket () 


关闭 WebSocket 连 接 。 


示例 代码 如 下 : 





wx.closeSocket(); 





7.wx.onSocketClose (callback) 





监听 WebSocket 是 否 关 闭 。 当 WebSocket 成 功 关 闭 时 触发 。 


示例 代码 如 下 : 





wx.connectSocket( { 
Url : 'wss://www.myserver.com' 











这 里 关闭 socket 必 须 在 成 功 打开 后 ， 
如 果 由 于 网 络 或 时 效 问 题 在 成 功 打开 前 调用 closeSocket， 那 么 就 做 不 到 关闭 WebSocket 目 的 。 


























wx.onSocketOpen( function() { 
wx.closeSocket( ) ; 


} ) 


wx.onSocketClose( function() { 
console.1og( ' 连 接 已 关闭 ' ); 
} ); 
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5.2 媒体 


5.2.1 图 片 


1.wx.chooseImage (Object) 


从 本 地 相册 选择 图 片 或 者 使 用 相机 拍照 。 拍 照 时 产生 的 临时 路 径 ， 
在 小 程序 本 次 启动 期 间 可 以 正常 使 用 ， 如 需 持 久保 存 ， 需 要 主动 调用 
wx.saveFile， 这 样 才能 保证 小 程序 下 次 启动 时 能 访问 到 。Object 参 数 属 
性 如 下 : 











:count: 最 多 可 以 选择 的 图 片 张 数 ， 默 认为 9。 


'SizeType: 图 片 尺 寸 类 型 ， 有 效 值 为 original( 原 图 ) 、 
compressed〈 压 缩 图 ) ， 默 认 二 者 都 有 。 


'SouUrceType: 获取 图 卢 的 方式 ， 有 效 值 为 abum (从 相册 选 图 ) 、 
camera〈 使 用 相机 ) ， 默 认 二 者 都 有 。 


'Success: 成 功 则 返回 图 片 的 本 地 文件 路 径 列 表 tempFilePaths， 必 填 
项 。 


fail: 接口 调用 失败 的 回调 函数 。 


“complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





<view> 
<image src="{{src}}"></image> 


<button bindtap="chooseImage"> 选 择 图 片 </button> 
</view> 














chooseImage : function() { 

Var self = this; 

wx.chooseImage( { 
count : 1, 
sizeType : ['original', 'compressed'], 
sourceType : ['album', 'camera'], 
success : function( res ) { 

console,1og( res.tempFilepPaths ); 


} 

} ); 
} 
} ); 





2.wx.previewImage (Object) 


预 宽 图 片 ， 调 用 后 小 程序 会 开局 图 片 浏 览 界 面 ，Object 参 数 属性 如 
下 : 


current: 当前 显示 图 片 的 链接 ， 链 接地 址 必须 是 urls 中 已 存在 的 链 
接 ， 不 填 则 默认 为 urls 的 第 一 张 。 


-urls: 需要 预览 的 图 片 链 接 列表 ， 必 填 项 。 


“success: 接口 调用 成 功 的 回调 函数 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 








WX ， previewImage( { 

\ 认 先 显示 第 二 | 
current : 'http://www.uimaker .com/uploads/allimg/130301/1 130301090721 3.jpg', 
Urls : 

'http://www.uimaker .com/uploads/allimg/130301/1_ 130301090720_ 2.jpg', 
'http://www.uimaker.com/uploads/allimg/130301/1_ 130301090721 3.jpg' 


] 
} ); 








3.wx.getImagelInfo (Object) 
获取 图 片 信息 ，Object 属 性 如 下 : 


rc: 图 片 的 路 径 ， 可 以 是 相对 路 径 、 临 时 文件 路 径 、 存 储 文件 路 
径 ， 网 络 图 片 路 径 。 


“success: 接口 调用 接口 成 功 的 函数 ， 返 回 参 数 如 下 : Width 为 图 片 
宽度 ，height 为 图 片 高 度 ， 单 位 均 为 px。 


fail: 接口 调用 失败 的 回调 函数 。 


“complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 
全 天 


示例 代码 如 下 : 





chooseImage : function() { 
wx.chooseImage( { 
success : function( res ) { 
wx.getIimageInfo( { 
src : res.tempFilepaths[0], 
success : function( info ) { 
console.1log( info ); 


} 
} ); 


5.2.2 录音 


1.wx.startRecord (Object) 


开始 录音 。 当 主动 调用 wx.stopRecord， 或 者 录音 超过 1 分 钟 时 自动 
结束 录音 ， 返 回 录 音 文 件 的 临时 文件 路 径 当 用 户 离开 小 程序 时 ， 此 接口 
无 法 调用 。 录 音 接口 需要 用 户 授权 ， 业 务 代 码 中 需要 考虑 用 户 拒绝 授权 
的 场景 。Object 参 数 属性 : 


success: 录音 成 功 后 调用 ， 返 回 录 音 文 件 的 临时 文件 路 径 ，res= 
{tempFilePath: ' 录 音 文件 的 临时 路 径 '}。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
条 让 


示例 代码 如 下 : 





wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilePath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 





2.wx.stopRecord () 


主动 调用 停止 录音 。 


根据 上 例 代 码 ， 本 例 在 10 秒 钟 后 俘 目 录音， 示例 代码 如 下 : 





WX,StartRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilepPath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 
}); 
} 
}); 


setTimeout( function() { 
wx.stopRecord( ); 
}, 10000 ); 





5.2.3 ”音频 播放 控制 


1.wx.playVoice (Object) 


开始 播放 语言 ， 同 时 只 允许 一 个 语音 文件 播放 ， 如 果 前 一 个 语音 文 


件 还 没 播放 完 ， 将 中 断 前 一 个 语音 播放 。Object 参 数 属性 如 下 : 
-filePath: 需要 播放 的 语言 文件 路 径 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
TT 


示例 代码 如 下 : 





wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilepPath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 
); 





2.wx.pauseVoice () 


暂停 正在 播放 的 语音 。 再 次 调用 wx.playVoice 播 放 同一 个 文件 时 ， 
会 从 暂停 处 开始 播放 。 如 宋 想 从 头 开 始 播放 ， 需 要 移 调 用 


WX.StopVoice。 


根据 上 例 代码 ， 我 们 实现 5 秒 后 自动 暂停 播放 ， 示 例 代码 如 下 : 





wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilePath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePpath: tempFilePath 


过 

SetTimeout( function() { 
wx.pauseVoice( ); 

}, 5000 ); 


}); 





3.WX.StopVoice () 


结束 播放 语音 。 


示例 代码 如 下 : 





wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilePath 
wx.playVoice({ // 录音 完成 后 立即 播放 。 
filePath: tempFilePath 


}); 

setTimeout( function() { 
wx.stopVoice( ); 

}, 5000 ); 


}); 


5.2.4 音乐 播放 控制 


1.wx.getBackgroundAudioPlayerState (Object) 


获取 后 台 音 乐 播放 状态 。 调 用 本 方法 时 可 以 获取 <audio/> 组 件 或 
wX.playBackgroundAudio 〈) 方法 播放 的 音乐 。Object 参 数 属性 如 下 : 


.Success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参 数 属性 如 下 : 








duration: 选 定 音频 的 长 度 〈 单 位 : s) ， 只 有 在 当前 有 音乐 播放 时 
返回 。 





currentPosition: 选 定 音频 的 播放 位 置 〈 单 位 : s) ， 只 有 在 当前 有 
音乐 播放 时 返回 。 


status: 播放 状态 〈0: 暂停 中 ，1: 播放 中 ，2: 没有 音乐 在 播 
放 ) 。 


.downloadPercent: 首 频 的 下 载 进度 (整数 ， 如 : 80 代 表 80%) ， 只 
有 在 当前 有 音乐 播放 时 返回 。 




















“dataUrl: 歌曲 数据 链接 ， 只 有 在 当前 有 音乐 播放 时 返回 。 





fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
和 


示例 代码 如 下 : 





wx.getBackgroundAudioPlayerState( { 
success : function( res ) { 
Var statusText = { 








} 
console.log( statusText[res.status] ); 


} 
} ); 





2.wx.playBackgroundAudio (Object) 





播放 音乐 ， 同 时 只 能 有 一 首 音乐 正在 播放 。Object 参 数 属性 如 下 : 
-dataUrl: 音乐 链接 ， 必 填 项 。 

title: 音乐 标题 。 

:coverImgUrl: 封面 URL。 

“success: 接口 调用 成 功 的 回调 函数 。 

fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3', 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function 


() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ); 
} 
} ); 





3.wx.pauseBackgroundAudio () 


暂停 播放 音乐 。 


示例 代码 如 下 : 





wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3', 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ) ; 


} 

} ); 

setTimeout( function(){ 
console.1og( ' 暂 停 播放 ' ) ， 


wx.pauseBackgroundAudio( ); 
+，60000 ); // 60 秒 后 自动 暂停 























4.wx.seekBackgroundAudio (Object) 


控制 音乐 播放 进度 ， 利 用 这 个 API 可 以 实现 音乐 的 快 进 、 快 退 和 播 
放 位 置 拖 动 功能 ，Object 属 性 如 下 : 


:position: 音乐 位 置 ， 单位: 秒 。 


success: 接口 调用 成 功 的 回调 函数 。 
fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getBackgroundAudioPlayerState( { 
success : function( res ) { 
var currentPosition = res.currentPosition,; 
wx.seekBackgroundAudio( { 
postion : currentPosition + 30 


} ); 





5.wx.stopBackgroundAudio () 
停止 播放 音乐 。 


示例 代码 如 下 : 





wx.playBackgroundAudio( { 


dataUrl : './music/mymusic.mp3'", 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 


success : function() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ); 


} 
} ); 


setTimeout( function(){ 
console.1og( ' 停 止 播放 ' ); 
wx.stopBackgroundAudio( ); 

}，60000 ); // 60 秒 后 自动 停止 
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6.wx.onBackgroundAudioPlay (callback) 
监听 音乐 播放 。 


示例 代码 如 下 : 





wx.onBackgroundAudioPlay( function() { // 导 
console.1og( ' 音 乐 播放 ' ) ， 
} ); 


wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3'", 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function() 


{ 
console.1og( ' 开 始 播 放 音 乐 了 ' ); 
} 
} ); 


件 先 绑 定 





i 








7.wx.onBackgroundAudioPause (callback) 


监听 音乐 暂停 。 


示例 代码 如 下 : 





WX. onBackgroundAudiopause( function() { 
console,.1og( ' 音 乐 暂停 ' )，; 


} ); 


wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3', 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function() 


{ 
console.1og( ' 开 始 播 放 音 乐 了 ' ) ; 
} 
} ); 





8.wx.onBackgroundAudioStop (callback) 


监听 音乐 停止 。 


示例 代码 如 下 : 





wx.onBackgroundAudioStop( function() { 
console.1og( ' 音 乐 停止 ' ); 


} ); 


wx.playBackgroundAudio( { 
dataUrl : './music/mymusic.mp3'", 
title : ' 我 的 音乐 '， 
coverImgUrl : './images/poster.jpg', 
success : function() { 
console.1og( ' 开 始 播 放 音 乐 了 ' ); 


} 
} ); 








5.2.5 “音频 组 件 控制 


wx.createAudioContext (audiold) 创建 并 返回 audio 上 下 文 
audioContext 对 象 ，audioContext 通 过 audioId 和 一 个 <audio/> 组 件 绑 定 ， 


通过 它 可 以 操作 对 应 的 <audio/> 组 件 。audioContext 对 象 方法 如 下 : 
setSrc: 设置 音频 地 址 。 
:play: 播放 。 
:pause: 暂停 。 
seek: 跳 转 到 指定 位 置 ， 单 位 为 s。 


利用 播放 相关 API 配 合 <audio/> 我 们 可 以 创建 自 定义 样式 播放 器 ， 
示例 如 图 5-1 所 示 。 


设置 ”动作 帮助 微 信 开 发 者 工具 0.11.122100 CX 


iPhone 4 i [x Console 
© 守 top 


[Fitter 





国 Hide network m 


AN | Errors Warni 
> 


跳 到 30 秘 
回 和 到 开头 





| Console 
图 5-1 上 自 定义 样式 播放 器 


示例 代码 如 下 : 





<view class="custom-audio"> 
<audio id="myAudio" style="display:none;"></audio> 
<image class="poster" mode="widthFix" src="http://www.yoka.com/dna/pics/ba1lc1117/4 
<view class="actions" bindtap="action"> 
<view data-type="play"> 播 放 </view> 
<view data-type="pause"> 暂 停 </view> 
<view data-type="seek"> 跳 到 30 秒 </view> 
<view data-type="reset"> 回 到 开头 </View> 
</view> 














</view> 


.CUStom-audio { width : S00rpx; border : solid 1px #ccc; border-bottom : 0; margin 
.CUStom-audio .poster { width : 80%; border-radius: 50%; margin: 10%; } 
.CUStom-audio .actions view { height : 80rpx; line-height: 80rpx; text-align: center 


Page( { 

onReady : function( e ) { 

this.audioContext = wx.createAudioContext( 'myAudio' ); 

this,audioContext ,SetSrc( 'http://ws.stream.qqmusic.qq.com/MS500001VfvsJ21xFqb.mr 
】 
action : function( e ) { 

var type = e,target,dataset.type， 

audioContext = this.audioContext; 


Switch ( type ) { 

// 播放 

case 'play' : 
audioContext.play(); 
break; 

// 暂停 

case 'pause' 
audioContext .pause( ); 
break; 

// 跳 到 30 秒 处 

case 'seek' 
audioContext.seek( 30 ); 
break; 

// 从 头 播放 

case 'reset' : 
audioContext.seek( 0 ); 
break; 


5.2.6 ”视频 
Wx.chooseVideo (Object)〉 拍 摄 视频 或 从 手机 相册 中 选取 视频 ， 返 
回 视频 的 临时 文件 路 径 。Object 参 数 属性 如 下 : 


“sourceType: 获取 视频 方式 ，album 从 相册 选中 视频 ，camera 使 用 
相机 拍摄 ， 默 认 值 为 : [‘album?，“‘camera’]。 


maxDuration: 拍摄 视频 最 长 提 摄 时 间 ， 单 位 秒 。 最 长 文 持 60 秒 。 





:camera: 拍摄 适 配 的 方式 用 前 置 或 后 置 摄像 头 ， 默 认为 前 后 都 


有 : [‘album’，‘camera’]。 


success: 接口 调用 成 功 ， 返 回 视 频 文 件 的 临时 文件 路 径 ， 返 回 参 
数 属 性 如 下 : 


tempFilePath: 选 定 视 频 的 临时 文件 路 径 。 
-duration: 选 定 视频 的 时 间 长 度 。 

size: 选 定 视频 的 数据 量 大 小 。 

-height: 选 定 视 频 的 高 。 


-width: 选 定 视频 的 高 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.chooseVideo( { 
sourceType : [ 'album', 'camera' ]， 
camera : [ 'front', 'back' ] 
success : function( res ) { 
console.1log( res.tempFilePath ); 


} 
} ); 
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5.2.7 ”视频 组 件 控制 


wx.createVideoContext (videoIld) 同 
wx.createAudioContext (audioId) 一 样 ， 
wx.createVideoContext (videoIld)〉 用 于 创建 并 返回 video 上 下 文 
videoContext 对 象 ，video-Context 对 象 方法 如 下 : 


.play: 播放 。 

-pause: 暂停 。 

seek: 跳 转 到 指定 位 置 ， 单 位 s。 

sendDanmu: 发 送 弹 幕 ，danmu 包 含 两 个 属性 text，color。 


示例 代码 如 下 : 





<video src=",./video/myvideo.mp4" id="myVideo"></video> 


<button bindtap="play"> 播 放 </button> 

<button bindtap="pause"> 暂 停 </button> 
<button bindtap="restart"> 回 到 开头 </button> 
<button bindtap="sendDanmu"> 发 送 弹 幕 </button> 











Page( { 
onReady : function() { 
this,.videoContext = wx.createVideoContext( 'myVideo' ); 


} 

play : function() { 
this.videoContext .play(); 

} 

pause : function() { 
this.videoContext.pause( ); 

} 

restart : function() { 
this.videoContext.seek( 0 ); 


}, 


sendDanmu : function() { 
this.videoContext.sendDanmu( { 
text : ' 弹 幕 文案 '， 
color : '#ff0000'" 
} ); 


} 
} ); 





5.3 ”文件 





从 网 络 下 载 、 担 照 、 录 音 、 录 视频 时 ， 文 件 都 是 存在 临时 文件 中 ， 
需要 永久 保存 这 些 文件 就 需要 我 们 主动 调用 API 进 行 保存 ， 这 时 小 程序 
会 将 文件 保存 到 系统 指定 目录 ， 关 于 这 些 文件 操作 都 需要 调用 相关 
API。 








1.wx.saveFile 《Object ) 





保存 文件 到 本 地 ， 本 地 文件 存储 大 小 限制 为 10MB。Object 参 数 属 
性 如 下 : 


-tempFilePath: 需要 保存 文件 的 临时 路 径 ， 必 项 项 。 


.Success: 返回 文件 的 保存 路 径 ，res={savedFilePath: ' 文 件 的 保存 
路 径 人 小。 


fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
人 


示例 代码 如 下 : 





wx.startRecord({ 
success: function(res) { 
var tempFilePath = res.tempFilePath // 临时 文件 路 径 
wx.saveFile({ // 保存 临时 文件 
tempFilePath: tempFilePath, 
success: function(res) { 
var savedFilePath = res.savedFilePath; // 永久 地 址 路 径 
console.10g( “' 录 音 文件 已 保存 到 : ' + savedFilePath ); 


} 
}) 
} 
}); 











2.wx.getSavedFileList (Object) 

获取 本 地 已 保存 文件 列表 ，Obejct 参 数 属性 如 下 : 

success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参数 属性 如 下 : 
:errMsg: 接口 调用 结果 。 

-fileList: 文件 列表 ，fileList 项 目 属性 包括 : 

-filtpath: 文件 的 本 地 路 径 。 


:createTime: 文件 保存 的 时 间 ， 从 1970/010108: 00: 00 到 当前 时 
间 的 秒 数 。 


size: 文件 的 大 小 ， 单 位 B。 
.fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


行 ) 。 


示例 代码 如 下 : 





wx.getSavedFileList( { 
success : function( res ) { 
for ( var i = 0, file; file = res.fileList[i]; ++i ) { 
console.1log( ' 第 ' + i + ' 个 文件 路 径 : ' + file.filePath ); 








3.wx.getSavedFileInfo (Object) 

获取 本 地 文件 的 文件 信息 ，Object 属 性 如 下 : 
-filePath: 文件 路 径 ， 必 填 项 。 

Success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参数 属性 如 下 : 
'errMsg: 接口 调用 结果 。 

size: 文件 大 小 ， 单 位 B。 


:createTime: 文件 保存 时 的 时 间 惟 ， 从 1970/010108: 00: 00 到 当 
前 时 间 的 秒 数 。 


-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getSavedFileList( { 
success : function( res ) 
for ( var i = 0, file; file = res.fileList[il]; ++i ) { 
wx.getSavedFileInfo( { 
filePath : file.filePath， 
Success : function( res ) { 
console.10g( ' 文 件 大 小 为 : ' + res.size ); 


} 
} ); 
} 





4.wx.removeSavedFile (Object) 
删除 本 地 存储 的 文件 ，Obejct 参 数 属性 如 下 : 
-filePath: 需要 删除 的 文件 路 径 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 

-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getSavedFileList( { 
success : function( res ) { 
// 删除 所 有 文件 
for ( var i = 0, file; file = res,.fileList[I]; ++i ) { 
wx.removeSavedFile( 
filePath : file,filePath 


} ); 
} 





5.wx.openDocument (Object) 


在 新 页 面 中 打开 文档 ， 文 持 格 式 有 : doc、docx、xls、xlsx、ppt、 
pptXx、pdf、Object 参 数 属性 如 下 : 


-filePath: 文件 路 径 ， 可 通过 wx.downFile 获 得 ， 必 填 项 。 
.Success: 接口 调用 成 功 的 回调 函数 。 
:fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.downloadFile( { 
Url : 'http://www.myserver.com/my.docx', 
success : function( res ) { 
Var filePath = res.filepPath; 
// 下 载 文档 后 在 新 页 面 中 预览 
wx.openDocument( 
filePath : filePath 
} ); 


} 
} ); 
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5.4 数据 缓存 








每 个 小 程序 都 可 以 有 自己 的 本 地 缓存 ，local Storage 是 永久 存储 
的 ， 本 地 缓存 最 大 为 1OMB， 数 据 操作 API 分 为 同步 和 异步 两 种 。 


5.4.1 保存 数据 


1.wx.setStorage (Object) 





将 数据 存在 本 地 缓存 指定 的 key 中 ， 会 履 盖 掉 原 来 该 Kkey 对 应 的 内 
容 ， 这 是 一 个 异步 接口 。Object 参 数 属性 如 下 : 


key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 
-data: 需要 存储 的 内 容 ， 必 选项 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 
fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
条 


示例 代码 如 下 : 





wx.setStorage( { 
key : 'myKey', 
Value : "myValue' 





2.wx.setStorageSync (KEY, DATA) 


将 数据 存在 本 地 缓存 指定 的 key 中 ， 会 覆盖 掉 原 来 该 key 对 应 的 内 
， 这 是 一 个 同步 接口 。 参 数 说 明 : 





骂 


:key: 本 地 缓存 中 指定 的 key。 
.data: 需要 存储 的 内 容 。 
示例 代码 如 下 : 


wx.setStorageSync( 'myKey', 'myValue' ); 





5.4.2 ”获取 数据 


1.wx.getStorage (Object) 





从 本 地 缓存 中 异步 获取 指定 key 对 应 的 内 容 ，Object 参 数 属性 如 下 : 
key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 


success: 接口 调用 的 回调 函数 ，res={data: key 对 应 的 内 容 }， 必 填 
ms 


-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
TT 


示例 代码 如 下 : 





wx.getStorage( { 
key : 'myKey', 
success : function( res ){ 
console.1og( res.data ); // 打印 出 myKey 对 应 的 内 容 


} 
} ); 





2.wx.getStorageSync (KEY) 


从 本 地 缓存 中 同步 获取 指定 key 的 对 应 内 容 ， 参 数 说 明 : 


key: 本 地 缓存 中 的 指定 的 key， 必 填 项 。 


示例 代码 如 下 : 





var value = wx.getStorageSync( 'myKey' ) 
console.log( value ); 





5.4.3 ”获取 本 地 数据 信息 


1.wx.getStorageInfo (Object) 

异步 获取 当前 storage 的 相关 信息 ，Object 参 数 属性 如 下 : 
“success: 接口 调用 的 回调 函数 ， 返 回 参数 属性 如 下 : 
keys: 当前 storage 中 所 有 的 key。 
currentSize: 当前 占用 的 空间 大 小 ， 单 位 kb。 
limitSize: 限制 的 空间 大 小 ， 单 位 kb。 

-fail: 接口 调用 失败 的 回调 函数 。 


“complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 
行 ) 


示例 代码 如 下 : 





wx.getStorageInfo( { 
success : function( res ) { 
var p; 
for ( pin res.keys ) { 
console.log( p + ':' + Wx.getStorageSync( p ) ); 
} 


2.wx.getStorageInfoSync () 
同步 获取 当前 storage 的 相关 信息 。 


示例 代码 如 下 : 





Var p, 
info = wx.getStorageInfoSync(); 
for ( p in info,keys ) { 
console.log( p + ':' + Wx.getSstorageSsync( p ) ); 





5.4.4 删除 数据 


1.wx.removeStorage (Object) 

根据 key 值 异步 删除 本 地 数据 ，Object 参 数 属性 如 下 : 
-key: 本 地 缓存 中 指定 的 key， 必 填 项 。 

“success: 接口 调用 的 回调 函数 ， 必 填 项 。 

fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
位 


示例 代码 如 下 : 





wx.removeStorage( { 
key : 'myKey', 
success : function( res ) { 
console.log( res.data ); 


} 
} ); 





2.wx.removeStorageSync (Key) 
根据 key 值 同步 删除 本 地 数据 。 


示例 代码 如 下 : 


1 
wx.removeStorageSync( 'myKey' ); 


二 一 


5.4.5 “清空 数据 


1.wx.clearStorage () 
清理 本 地 数据 缓存 。 


示例 代码 如 下 : 





wx.clearStorage(); 
// 不 阻塞 下 面 代 码 
doSomethirg(); 





2.wx.clearSotargeSync () 


同步 清理 本 地 数据 缓存 。 


示例 代码 如 下 : 





wx.clearStorageSync(); 
// 阻 塞 下 面 代码 
doSsomethirg(); 

















5.5 位 置 


5.5.1 获取 位 置 





在 国际 上 ， 坐 标 体系 有 多 和 套 标 准 ， 小 程序 文 持 WGS84 标 准 和 GCj02 
标准 ，WGS84 是 地 球 坐 标 系 ， 国 际 上 通用 的 坐标 系 。 设 备 一 般 包 含 的 
GPS 心 片 或 者 北斗 蕊 片 所 获取 的 经 纬度 为 WGS84 地 理 坐 标 系 。GCJ02 化 
标 系 为 火星 坐标 系 ， 是 由 中 国 国 家 测绘 局 制订 的 地 理 信息 系统 的 坐标 系 
统 ， 它 是 由 WGS84 坐 标 系 经 加 密 后 的 坐标 系 ， 它 是 在 小 程序 中 ， 碍 看 
位 置 需要 使 用 GCJ02 标 准 坐标 。 


wx.getLocation 《Object) 用 于 获取 当前 的 地 理 位 置 、 速 度 ， 需 要 用 
户 开 局 定位 功能 ， 当 用 户 离开 小 程序 后 ， 此 接口 无 法 调用 ;， 汝 用户 点 
击 “ 显 示 在 聊天 顶部 ”时 ， 此 接口 可 继续 调用 ，Object 参 数 属性 如 下 : 


type: 默认 为 wgs84 返 回 gps 坐 标 ，gcj02 返 回 可 用 于 


wxX.0penLocation 的 坐标 。 


“success: 接口 调用 成 功 的 回调 函数 ， 必 填 项 ， 返 回 参数 属性 如 


latitude: 纬度 ， 浮 上 点数， 范围 为 -90 一 90， 负 数 表示 南 纬 。 


-longitude: 经 度 ， 浮 点 数 ， 范 围 -180 一 180， 负 数 表示 西 经 。 
.Speed: 速度 ， 浮 点 数 ， 单 位 m/s。 

accuracy: 位 置 的 精确 度 。 

-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getLocation( { 
type : 'wgs84"', 
success : function( res ) { 
console.log( res ); 


} 
} ); 





5.5.2 选择 位 是 
wx.chooseLocation (Object〉 用 于 打开 地 图 选择 位 置 ， 用 户 选 中 后 
返回 选中 信息 ，Object 参 数 属性 如 下 : 


Success: 接口 调用 成 功 的 回调 函数 ， 必 填 项 ，success 返 回 参数 属 
性 如 下 : 


name: 位 置 名 称 。 

"address: 详细 地 址 。 

-latitude: 纬度 ， 浮 点 数 ， 范 围 为 -90 一 90， 负 数 表 示 南 纬 。 
longitude: 经 度 ， 浮 点 数 ， 范 围 为 -180 一 180， 负 数 表示 西 经 。 
cancel: 用 户 取消 时 调用 。 

-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
人行) 


示例 代码 如 下 : 





wx.chooseLocation( { 


success : function( res ) { 
console.log( res.address ); 
} 
} ); 
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5.5.3 ”查看 位 置 


wx.openLocation 《Object) 用 于 在 微 信 内 置地 图 查看 位 置 ，Object 
参数 属性 如 下 : 








-latitude: 纬度 ， 范 围 为 -90 一 90， 负 数 表示 南 纬 ， 必 填 项 。 
-longitude: 经 度 ， 范 围 为 -180 一 180， 负 数 表 示 西 经 ， 必 填 项 。 
scale: 缩放 比例 ， 范 围 1 一 28， 默 认为 28。 

.name: 位 置 名 。 

“address: 地 址 的 详细 说 明 。 

success: 接口 调用 成 功 的 回调 函数 。 

-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getLocation( { 
type : 'gcj02'， // 返回 可 用 于 wx .openLocation 的 经 纬度 
success : function( res ) 
wx.open( { // 显示 当前 地 址 




















latitude : res.]latitude, 
longitude : res.longitude 


} ); 
} 
} ); 


人 人 人 i 


5.5.4 地 图 组 件 控制 


wx.createMapContext (Object) 用 于 创建 并 返回 map 上 下 文 
mapContext 对 象 ，map-Context 通 过 mapId 跟 一 个 <map/> 组 件 绑 定 ， 通 过 
它 可 以 操作 对 应 的 <map/> 组 件 ，map-Context 对 象 方法 如 下 : 


"getCenterLocation: 获取 当前 地 图 中 心 的 经 纬度 ， 返 回 的 是 gcj02 坐 
标 系 ， 可 以 用 于 wx.openLocation。getCenterLocation 人 参数 属性 如 下 : 


.Success: 接口 调用 成 功 的 回调 函数 ，res={flongitude: "经 度 "， 
latitude: "纬度 "} 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
行 下 5 





-moveToLocation: 将 地 图 中 心 移动 到 当前 定位 点 ， 需 要 配合 map 组 
件 的 show-location 使 用 。 


示例 代码 如 下 : 





<map id="myMap" show-location/> . 
<button data-type="getCenterLocation" bindtap="action"> 获 取 位 置 </button> 
<button data-type="location" bindtap="action"> 移 动 位 置 </button> 























Page( { 


onReady : function( e ) { 
this.mapContext = wx.createMapContext( 'myMap' ); 
}, 
action : function( e ) { 
var type = e.tareget.dataset.type, 
mapContext = this.mapContext; 


Switch ( type ) { 
// 获取 当前 地 图 中 心 纬度 
case 'getCenterLocation': 
mapContext.getCenterLocation( { 
success : function( res ) { 
console.log( res.longitude + ',' + res.latitude ); 


} 


1 
// 定位 到 当前 位 
case 'location': 

mapContext.moveToLocation( ) ， 









































5.6 设备 
5.6.1 ”系统 信息 


1.wx.getSystemInfo (Object) 
异步 获取 系统 信息 。Object 参 数 属性 为 


success: 接口 调用 成 功 回调 函数 ， 返 回 系统 相关 信息 ， 必 填 项 ， 
返回 参数 属性 如 下 : 


-model: 手机 型 号 。 
:pixelRatio: 设备 像素 比 。 
-windowWidth: 窗口 宽度 。 
-windowHeight: 窗口 高 度 。 
language: 微 信 设置 的 语言 。 
Version: 微 信 版 本 号 。 


system: 操作 系统 版 本 。 


platform: 客户 端 平台 。 
fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.getSystemInfo( { 
success : function( info ) { 
console.1log( info ); 


} 
} ); 





2.wx.getSystemInfoSync () 


同步 获取 系统 信息 。 


示例 代码 如 下 : 





var info = wx.getSystemInfoSync(); 
console.1log( info ); 





5.6.2 ”网 络 状 态 
wxX.getNetworkType (Object) 用 于 获取 网 络 类 型 ，Object 参 数 属性 
ws 


“success: 接口 调用 成 功 回 调 函 数 ， 返 回 网 络 类 型 networkType， 必 
填 项 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
JT 


示例 代码 如 下 : 





wx.getNetworkType( { 
success : function( res ) { 
console.log( res.networkType ); 


} 
} ); 





5.6.3 重力 感应 


wx.onAccelerometerChange 〈callback) 用 于 监听 重力 感应 数据 ， 频 
率 : 5 次 / 秒 ，callback 返 回 参数 属性 如 下 : 


X: X 轴 重力 感应 ， 值 为 当前 轴 上 重力 加 速度 /重力 加 速度 (9.8) 。 


y: Y 轴 重力 感应 ， 值 参考 x 轴 。 





:Z: Z 轴 重力 感应 ， 值 参考 x 轴 。 


示例 代码 如 下 : 





<view>{{x}}, {{y}}, {{z2}}</view> 


data : {X : OQ,y : 0,z : 0}, 
onReady : function() { 
Var self = this; 
wx.onAccelerometerCchange(function(res) 
self.setData( {x : res.x,y : res.y,z : res.z} ); 
}) 


5.6.4 罗 


wx.onCompassChange 〈callback) 用 于 监听 罗盘 数据 ， 频 率 : 5 次 / 
秒 ， 调 用 罗盘 需要 开启 定位 功能 ，callback 人 参数 的 属性 有 direction: 当前 
面向 的 方向 度数 ， 正 北方 为 0， 范 围 为 0 一 360，-1 代 表 没 有 开启 定位 功 


会 已 
月 上。 





示例 代码 如 下 : 





wx.onCompresscChange( function( res ) { 
console.log( res.direction ); 


} ); 





5.6.5 ”拨打 电话 


wx.makePhoneCall (Object) 用 于 调用 手机 拨打 电话 功能 ，Object 参 
数 的 属性 如 下 : 


-phoneNumber: 需要 拨打 的 电话 号 码 ， 必 填 项 。 
.Success: 接口 调用 成 功 回调 函数 。 
fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
和 


示例 代码 如 下 : 





wx.makePhoneCall 
phoneNumbser : '1345678910' 


5.6.6 ” 扫 码 


scanCode (Object) 调 起 客户 端 扫 码 界面 ， 扫 码 成 功 后 返回 对 应 结 
果 。Object 参 数 如 下 : 





“success: 接口 调用 成 功 的 回调 函数 ， 返 回 参数 如 下 : 
Tesult: 扫 码 的 内 容 。 

“scanType: 所 扫 码 的 类 型 。 
“charSet: 所 扫 码 的 字符 集 。 


:path: 当 所 扫 的 码 为 当前 小 程序 的 合法 二 维 码 时 ， 会 返回 此 字段 ， 
内 容 为 二 维 码 携带 的 path。 


fail: 调用 接口 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
行 )。 


示例 代码 如 下 : 


wx.scanCode( { 
success : function( res ) { 
// 打印 扫 码 内 容 
console.log( res.result ); 





} ) 


5.7 界面 


5.7.1 交互 反馈 


1.wx.showToast (Object) 





显示 消息 提示 框 ，Object 人 参数 的 属性 如 下 : 
title: 提示 内 容 ， 必 填 项 。 
-icon: 图 标 ， 只 支持 ”success”、”loading”。 


-duration: 提示 的 延迟 时 间 ， 到 了 指定 时 间 自 动 关闭 ， 单 位 毫秒 ， 
默认 为 1500， 最 大 为 10000。 
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:mask: 是 否 显示 透明 蒙 层 ， 防 止 触摸 罕 透 ， 默 认为 false。 
.Success: 接口 调用 成 功 回 调 函 数 。 
fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
行 ) 。 


示例 代码 如 下 : 





wx.showToast( 
title : ' 操 作成 功 '， 
Icon : "Success' 


} ) 





2.wx.hideToast () 


隐藏 消 轧 提示 框 。 


示例 代码 如 下 : 





wx.showToast( { 
title : ' 请 稍 等 ..'， 
Icon : "loading '， 
duration : 10000 





setTimeout( function() { // 或 请 求 返回 时 关闭 toast 
wx.hideToast(); 
}, 2000 ); 














3.wx.showModal (Object) 
显示 模 态 弹 窗 ，Object 参 数 的 属性 如 下 : 
title: 提示 的 标题 ， 必 填 项 。 


:content: 提示 的 内 容 ， 必 填 项 。 





.ShowCancel: 是 否 显示 取消 按钮 ， 默 认为 true。 








:cancelText: 取消 按钮 的 文字 ， 默 认为 “取消 ”， 最 多 为 4 个 字符 。 


:cancelColor: 取消 按钮 的 文字 上 颜色， 默认 为 “#000000”。 





.confirmText: 确定 按钮 的 文字 ， 默 认为 “确定 >”， 最 多 4 个 字符 。 


:confirmColor: 确定 按钮 的 文字 颜色 ， 默 认为 “#3CC51F>” 


.Success: 接口 调用 成 功 回 调 函 数 ， 返 回 结果 res.confirm 为 true 时 ， 
表示 用 户 点 击 确定 按钮 。 





fail: 接口 调用 失败 的 回调 函数 。 


-complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


在 Android 微 信 6.6.30 版 中 ，wx.showModal 返 回 的 confirm 一 直 为 


true 。 


示例 代码 如 下 : 





wx.showModal( { 
title : ' 标 题 '， 
content : ' 内 容 '， 
success : function( res ) { 
if ( !res.confirm ) { 
return; // 用 户 点 击 了 取消 ， 不 作 任何 处 理 


console.1og( ' 用 户 点 击 了 确定 ' ); // 可 以 继续 流程 
} 
} ); 












































4.wx.showActionSheet (Object) 


显示 操作 菜单 ，Obejct 参 数 的 属性 如 下 : 

-itemList: 按钮 的 文字 数组 ， 数 组 长 度 最 大 为 6 个 ， 必 填 项 。 
itemColor: 按钮 的 文字 颜色 ， 默 认为 "#000000"。 

success: 接口 调用 成 功 回调 函数 ， 返 回 参 数 如 下 : 
-cancel: 用 户 是 否 取 消 选 择 。 

tapIndex: 用 户 点 击 的 按钮 ， 从 上 到 下 的 顺序 ， 从 0 开始 。 
fail: 接口 调用 失败 的 回调 函数 。 


“complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.showActionSheet( { 
itemList : [ " 缺 货 '， "配送 时 间 选 错 ' ，“" 不 想 买 了 '"， "其 他 ']， /A/ 订单 用 户 取消 原因 
success : function( res ) { 
If ( !res,cancle ) 
console.log( res,tapIndex ); 















































5.7.2 ”设置 导航 条 


1.wx.setNavigationBarTitle (Object) 

动态 设置 当前 页 面 的 标题 ，Object 参 数 属性 如 下 : 
title: 页 面 标 题 ， 必 填 项 。 

success: 接口 调用 成 功 的 回调 函数 。 

fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
位 


示例 代码 如 下 : 





wx.setNavigationBarTitle( { 
title : ' 新 页 面 ' 























2.wX.ShowNavigationBarLoading () 








在 当前 页 面 显示 导航 条 加 载 动画 。 


示例 代码 如 下 : 





Page( { 
onShow : function() { 
wx.showNavigationBarLoading(); 


} 
} ); 





3.wx.hideNavigationBarLoading () 


隐藏 导航 条 加 载 动 画 。 


示例 代码 如 下 : 





Page( { 
onLaunch : function() { 
wx.hideNavgationBarLoading(); 


} 
} ); 





5.7.3 “导航 


1.wx.navigateTo (Object) 


保留 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ， 使 用 wx.navigateBack 可 
以 返回 到 原 页 面 ， 小 程序 中 页 面 路 径 最 多 5 层 。Object 参 数 的 属性 如 下 : 





Url: 需要 跳 转 的 应 用 内 页 面 的 路 径 ， 路 径 后 可 以 带 参 数 ， 必 填 
项 。 参 数 与 路 径 之 间 使 用 *? ”分 隔 ， 人 参数 键 与 参数 值 用 “=” 相 连 ， 不 同 
参数 用 “&”* 分 隔 ， 如 'path? key=value&key2=value2'。 


success: 接口 调用 成 功 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.navigateTo( 
Url : '../newpage?key1l=valuel’ 
} ); 
Page( { 
onLoad : function( option ) { 
console.1og( option.query ); 


} 
} ); 


ee | 


2.wx.redirectTo (Object) 
关闭 当前 页 面 ， 跳 转 到 应 用 内 的 某 个 页 面 ，Object 参 数 属性 如 下 : 


url: 需要 跳 转 的 应 用 内 页 面 的 路 径 ， 路 径 后 可 以 带 参 数 ， 必 填 
项 。 参 数 与 路 径 之 间 使 用 ? 分隔 ， 参 数 键 与 参数 值 用 = 相连 ， 不 同 参数 
用 & 分 隔 ; 如 'path? key=value&key2=value2'。 


success: 接口 调用 成 功 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
条 


示例 代码 如 下 : 


wx.redirectTo( { 
rl : '../newpage?key1l=value1’ 


} ); 


3.wx.switchTab (Object) 


跳 转 到 tabBar 页 面 ， 并 关闭 其 他 所 有 非 tabBar 页 面 。Object 参 数 的 属 
性 如 下 : 


url: 需要 跳 转 的 tabBar 页 面 的 路 径 〈 需 在 app.json 的 tabBar 字 段 定 义 


的 页 面 ) ， 路 径 后 不 能 带 参 数 ， 必 填 项 。 
success: 接口 调用 成 功 的 回调 函数 。 
-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 《〈 调 用 成 功 、 失 败 都 会 执 
人 


示例 代码 如 下 : 





// app,json 配 置 tabBar 


"tabBar" : { 
"list" 
































} 
wx.switchTab( { 
url : '/home' // 必须 是 已 注册 tab 














4.wx.navigateBack (Object) 


关闭 当前 页 面 ， 返 回 上 一 页 面 或 多 级 页 面 。 可 通过 
getCurrentPages () 获取 当前 的 页 面 栈 ， 以 决定 返回 几 层 。Object 参 数 
的 属性 为 delta: 返回 的 页 面 数 ， 如 果 delta 大 于 现 有 的 页 面 数 ， 则 返回 到 
首页 ， 默 认 值 为 1。 


示例 代码 如 下 : 








// 向 前 返回 3 级 
wx.navigateBack( { delta : 3 } ); 














5.7.4 动画 


wx.createAnimation (Object) 用 于 创建 一 个 动画 实例 animation。 可 
以 调用 动画 实例 的 方法 来 描述 动画 ， 最 后 通过 动画 实例 的 export 方 法 导 
出 动画 数据 ， 传 递 给 组 件 animation 属 性 ， 每 次 调用 exports 方 法 会 清 掉 之 
前 的 动画 操作 。Object 参 数 的 属性 如 下 : 





.duration: 动画 持续 时 间 ， 单 位 ms， 默 认 值 400。 


timeingFunction: 定义 动画 的 效果 ， 默 认 值 "linear"， 有 效 值 
为 "linear"、"ease"、"ease-in"、"ease-in-out"、"ease-out"、"step- 


start" 、"step-end"。 
-delay: 动画 延迟 时 间 ， 单 位 ms， 默 认 值 0。 
transformOrigin: 设置 transform-origin， 默 认为 "50%50%0"。 


示例 代码 如 下 : 





var animation = wx.createAnimation( { 
transformorigin : '0 0'，// 已 左上 角 为 中 心 点 
duration : 20000, 

timingFunction : "ease-in' 


} ); 




















1. 动 画 描 述 


创建 实例 后 我 们 需要 调用 实例 动画 方法 来 描述 动画 ， 这 些 方法 调用 
后 会 返回 上 自身 ， 文 持 链 式 调用 的 写法 ， 动 画 描述 方法 按 类 型 可 分 为 样 
式 、 旋 转 、 缩 放 、 偶 移 、 倾 糙 、 和 矩阵 变形 ， 下 面 分 别 介绍 


(1) 样式 

opacity (value〉: 设置 透明 度 ， 参 数 说 明 : 

-value: 透明 度 ， 参 数 范围 0 一 1。 

'backgroundColor (color) : 设置 背景 颜色 ， 人 参数 说 明 : 
color: 颜色 值 。 

width (length) : 设置 宽度 ， 参 数 说 明 : 


-length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 
义 单 位 的 长 度 值 。 


-height (length) : 设置 高 度 ， 参 数 说 明 : 


length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 
义 单位 的 长 度 值 。 


top 〈length) : 设置 top 属 性 ， 参 数 说 明 : 


length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 


义 单 位 的 长 度 值 。 
left (length) : 设置 left 属 性 ， 参 数 说 明 : 


length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 
义 单位 的 长 度 值 。 


:bottom (length) : 设置 bottom 属 性 ， 参 数 说 明 : 


length: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 
义 单位 的 长 度 值 。 


Tight (length) : 设置 right 属 性 ， 参 数 说 明 : 


-ength: 长 度 值 ， 如 果 传 入 Number 则 默认 使 用 px， 可 传 入 其 他 自 定 
义 单位 的 长 度 值 。 


(2) 旋转 

Totate (deg) : 从 原点 顺 时 针 旋 转 一 个 deg 角 上 度 ， 参 数 说 明 : 
-deg: 旋转 角度 ， 范 围 -180 一 180。 

:rTotateX (deg) : 在 X 轴 旋转 一 个 deg 角 度 ， 参 数 说 明 : 


-deg: 旋转 角度 ， 范 围 -180 一 180。 


TotateY (deg) : 在 Y 轴 旋转 一 个 deg 角 度 ， 参 数 说 明 : 
-deg: 旋转 角度 ， 范 围 -180 一 180。 

:rTotateZ 〈deg) : 在 Z 轴 旋转 一 个 deg 角 度 ， 参 数 说 明 : 
deg: 旋转 角度 ， 范 围 -180 一 180。 

Totate3d (X，y，Z，deg) : 旋转 的 简写 方法 ， 参 数 说 明 : 
X: 在 X 轴 的 旋转 角度 ， 范 围 -180 一 180。 

y: 在 y 轴 的 旋转 角度 ， 范 围 -180 一 180。 

:Z: 在 z 轴 的 旋转 角度 ， 范 围 -180 一 180。 

-deg: 从 原点 顺 时 针 旋 转 的 角度 ， 范 围 -180 一 180。 

(3) 缩放 

.Scale (sx，sy) : 同时 设置 在 X 轴 、Y 轴 的 缩放 ， 人 参数 说 明 : 


“SX: 一 个 参数 时 ， 表 示 在 X 轴 、Y 轴 同时 缩放 sx 倍数 ， 两 个 参数 时 
表示 在 X 轴 缩放 sx 倍数 。 


sy: Y 轴 缩放 的 sy 倍数 ， 可 以 不 填写 。 


.ScaleX (sx) : 设置 X 轴 缩放 ， 人 参数 说 明 : 


SX: X 轴 缩放 的 SX 倍 数 。 

scaleY (sy) : 设置 Y 轴 缩放 倍数 ， 参 数 说 明 : 

“Sy: Y 轴 缩放 的 sy 倍数 。 

scaleZ (sz) : 设置 Z 轴 缩放 倍数 ， 参 数 说 明 : 

sz: Z 轴 缩放 的 sz 倍数 。 

“scale3d (sx，sy，sz) : 同时 控制 X、Y、Z 轴 缩放 : 
SX: X 轴 缩放 的 SX 倍 数 。 

“Sy: Y 轴 缩放 的 sy 倍 数 。 

"sz: Z 轴 缩放 的 sy 倍数 。 

(4) 偏 移 

translate (tx，ty) : 表示 在 X、Y 轴 偏 移 量 ， 参 数 说 明 : 


tx: 一 个 参数 时 ， 表 示 在 X 轴 偏 移 tx， 单 位 px; 两 个 参数 时 ， 表 示 
在 X 轴 仿 移 tx。 


ty: 在 Y 轴 偏 移 ty， 蛙 位 px。 


-translateX (tx) : 表示 在 X 轴 偏 移 量 ， 参 数 说 明 : 


tx: 在 X 轴 偏 移 区 ， 单 位 px。 

translateY (ty) : 表示 在 Y 轴 偏 移 量 ， 参 数 说 明 : 
ty: 在 Y 轴 偏 移 ty， 单 位 px。 

translateZ (tz) : 表示 在 Z 轴 偏 移 量 ， 参 数 说 明 : 
tz: 在 Z 轴 偏 移 tz， 单 位 px。 

tranlate3d (tx，ty，tz) : 表示 在 X、Y、Z 轴 偏 移 量 ， 参 数 说 明 : 
tx: 在 X 轴 偏 移 多， 单位 px。 

ty: 在 Y 轴 偏 移 ty， 单 位 px。 

tz: 在 和 轴 偏 移 tz， 单 位 px。 

(5) 倾斜 

skew (ax，ay) : 表示 在 X、Y 轴 倾斜 ， 参 数 说 明 : 


“ax: 该 方法 有 一 个 参数 ax 时 ，Y 轴 坐标 不 变 ，X 轴 坐标 延 顺 时 针 倾 
斜 ax 度 ; 有 两 个 参数 (ax，ay) 时 ， 表 示 在 X 轴 倾斜 ax 度 。 


ay: ， 在 Y 轴 倾斜 ay 上 度 。 


-skewX (ax) : 表示 在 X 轴 倾斜 ， 参 数 说 明 : 


"ax: X 轴 倾斜 ax 度 。 

skewY (ay) : 表示 在 Y 轴 倾斜 ， 参 数 说 明 : 
-ay: ， 在 Y 轴 倾斜 ay 度 。 

《6) 矩阵 变形 


matrix (a，b，c，d，ft，ty) : 定义 矩阵 变形 ， 基 于 X 轴 和 Y 轴 华 


Y 


标 重新 定位 元 素 位 置 ， 同 CSS3 中 transform-function matrix。 





:matrix3d () : 定义 矩阵 变形 ， 其 于 X 轴 、Y 轴 、Z 轴 重新 定位 元 素 
位 置 ， 同 CSS3 中 transform-function matrix3d。 


和 窍 阵 变 形 相 对 复杂 ， 小 程序 矩阵 变形 同 CSS3 中 的 矩阵 变形 方法 一 
样 ， 大 家 可 以 参考 网 络 资料 。 


2. 动 男 队 列 


调用 动画 操作 方法 后 要 调用 step 〈) 来 表示 一 组 动画 完成 ， 可 以 在 
一 组 动画 中 调用 任意 多 个 动画 方法 ， 一 组 动画 中 的 所 有 动画 会 同时 开 
始 ， 一 组 动画 完成 后 才 会 进行 下 一 组 动画 。step 可 以 传 入 一 个 跟 
wx.createAnimation( ) 一 样 的 配置 参数 ， 用 于 指定 当前 组 动画 的 配置 。 
在 iOS/Android 微 6.3.30 版 中 ， 通 过 step 〈) 分 隔 动画 时 ， 只 有 第 一 步 动 





示例 代码 如 下 : 





<view style="width:100%;height:200px;"> 


<icon animation="{{animData}}" style="position:absolute;left:100px;" type="succes: 


</view> 
<button bindtap="rotateAndMove"> 旋 转 并 移动 </button> 
<button bindtap="rotateThenMove"> 旋 转 后 移动 </button> 


Page({ 
data: { 
animData: {} 


}, 
// 旋转 并 移动 
rotateAndMove : function() { 
var anim = wx.createAnimation( { 
duration : 1000, 
timingFunction : "ease' 


} ); 
// 同时 执行 2 个 动画 
anim.translateY( '100px' ).rotate( '720' ).step(); 
this.setData( { 
animData : anim.export() 


} ); 

















}, 
// 旋转 后 再 移动 


rotateThenMove : function() { 
var anim = wx.createAnimation( { 
timingFunction : "ease' 


























} ); 
// 分 步 执行 3 个 动画 ， 通 过 step 切 割 
anim.rotate( '720' ).step( { duration : 500 } ) 
anim.translateY( '100px' ).step( { duration : 500 } ); 
anim.translateX( '100px' ).step( { duration : 500 } ); 
this.setData( { 

animData : anim.export() 


} ); 














} 
}); 


SS 交加 


上 章 提 到 过 <canvas/> 组 件 ， 在 <canvas/> 组 件 中 画图 必须 通过 本 小 
结 介绍 的 API 实 现 ，<canvas/> 中 存在 一 个 二 维 坐标 体系 ， 左 上 角 的 坐标 
为 《0，0) ， 所 有 绘图 API 都 会 基于 这 个 坐标 体系 进行 绘制 。 绘 图 过 程 
大 致 可 分 为 3 步 : 


1) 创建 执行 上 下 文 。 
过 执行 上 下 文 进行 绘制 描述 。 
3) 调用 绘图 API， 将 绘制 描述 绘制 到 到 <canvas/>。 


示例 代码 如 下 ， 绘 图 演示 如 图 5-2 所 示 。 


设置 ”动作 ”帮助 微 信 开发 者 工具 0.11.122100 一 [|_|]X 


G iPhone 4 wifi [x Console 
i 定 top 





DD Hide network m 


A | Errors Warni 
> 





: |Console 


图 5-2 ”绘图 演示 





<canvas canvas-id="myCanvas" style="width:200px; height:200px; border:solid 1px"/> 


Page( { 

onReady : function() { 
// 第 1 步 ， 创 建 执行 上 下 文 
var canvasContext = wx.createCanvasContext( 'myCanvas' ); 
// 第 2 步 ， 设 置 绘制 描述 
canvasContext.setFillStyle( 'red' ); 
canvasContext.fillRect( 10, 10, 110, 110 ); 
// 第 3 步 ， 绘 图 
canvasContext ,draw( ) 


























(1) wx.createCanvasContext (canvVasId ) 


在 绘图 时 我 们 需要 调用 wx.createCanvasContext 〈() 创建 一 个 绘图 上 
下 文 context 对 象 ， 一 个 canvasContext 通 过 canvasId 与 <canvas/> 一 一 绑 
定 ，canvasContext 仅 作用 于 对 应 的 <canvas/>， 通 过 调用 绘图 上 下 文 相 关 
方法 实现 绘图 功能 。 


示例 代码 如 下 : 





var context = wx.createCanvasContext( 'myCanvas' ) ， 





(2) wx.canvasToTempFilePath (Object) 


将 当前 画布 内 容 导出 生成 图 片 ， 并 返回 文件 路 径 。Object 参 数 的 属 
性 如 下 : 


:canvasId: 画布 标识 ， 指 定 导 出 哪个 画布 ， 传 入 定义 在 <canvas/> 的 


canvas-id。 


“success: 接口 调用 成 功 的 回调 函数 ， 返 回 参 数 属性 有 
tempFilePath: 导出 图 片 的 文件 路 径 。 


fail: 接口 调用 失败 的 回调 函数 。 


:complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 


示例 代码 如 下 : 





wx.canvasToTempFilepPath( { 
canvasId : 'myCanvas', 
success : function( res ) { 
// 打印 出 图 片 路 径 














console.1og( res.tempFilePath ); 


} 
} ); 





2.canvasContext 对 象 方法 





<canvas/> 所 有 绘图 行为 都 需要 调用 绘图 上 下 文 相 关 方 法 实现 ， 这 些 
方法 整体 可 分 为 10 类 : 样式 、 渐 变 、 线 条 样式 、 和 矩阵 、 路 径 、 变 形 、 文 


字 、 图 片 、 混 合 、 其 他 。 


(1 样式 





样式 设置 会 全 局 作用 于 全 局 ， 如 果 没 有 和 窗 盖 ， 后 续 绘图 的 凑 色 将 沿 
用 之 前 的 设置 ， 样 式 设 置 相 关 方 法 如 下 : 





setFillStyle (color) : 设置 填充 颜色 ， 没 有 设置 默认 为 black。 人 参数 
为 color: 设置 为 填充 样式 的 颜色 ， 参 数 可 为 颜色 字符 串 ， 取 值 范 
围 : rgb (255，0，0) '、Tgba (255，0，0，0.6) '、%#ff0000' 格 式 的 颜 
色 字 符 串 ;也 可 为 渐变 颜色 对 象 。 


“setStrokeStyle 〈color) : 设置 描 边 闫 色 。 参 数 为 color， 同 上 。 


.SetShadow (offsetX，offsetY，blur，color) : 设置 阴影 ， 参 数 说 
明 如 下 : 


“offsetX: 阴影 相对 于 形状 在 水 平方 回 的 偏 移 。 








“offsetY: 阴影 相对 于 形状 在 竖 直 方 同 的 偏 移 。 
blur: 阴影 的 模糊 级 别 ， 数 值 越 大 越 模糊 。 


:color: 阴影 的 颜色 ， 取 值 范围 : rgb (255，0，0) ' 或 rgba (255， 
0，0，0.6) ' 或 #f0000' 格 式 的 颜色 字符 串 。 


示例 代码 如 下 ， 效 果 见 图 5-3: 





<canvas canvas-id="myCanvas" style="width:100%; height:400px;"/> 


Page( { 
onReady : function() { 
var canvasContext = wx.createCanvasContext( 'myCanvas' ); 
// 填充 方形 
canvasContext.setFillStyle( 'red' ); 
canvasContext.fillRect( 10, 10, 50, 50 ); 

















// 绘制 方 框 
canvasContext .SetStrokeSty]le( '#0000ff" ); 
canvasContext.strokeRect( 70, 10, 50, 50 ); 


// 绘制 带 阴 影 方形 

canvasContext.setShadow( 10, 10, 50, 'rgb( 90, 255, © )' ); 
// 这 里 填充 的 方形 颜色 受到 第 一 句 代 码 影 响 ， 也 为 红色 
canvasContext.fillRect( 130, 10, 50, 50 ); 



































canvasContext ,draw() ， 
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图 5-3 ”样式 方法 示例 
(2) 渐变 


渐变 相关 方法 用 于 创建 渐变 对 象 ， 渐 变 对 象 可 作为 参数 传 入 绘图 相 
关 方 法 ， 创 建 渐 变 的 坐标 是 基于 <canvas/> 的 坐标 ， 而 不 是 被 填充 图 形 的 
坐标 ， 在 使 用 渐变 填充 图 像 时 一 定 要 注意 坐标 的 转化 ， 创 建 渐变 相关 方 
法 如 下 : 


createLinearGradient (X0，y0，xl，y1l1) : 创建 一 个 线性 渐变 ， 参 


数 如 下 : 
X0: 起 点 的 x 坐标 。 
:y0: 起 点 的 y 坐 标 。 
X1: 终点 的 x 坐标 。 
y1: 终点 的 y 坐 标 。 


:createCircularGradient (x，y，r) : 创建 一 个 圆 形 的 渐变 ， 起 点 在 
圆心 ， 终 点 在 圆 环 ， 参 数 如 下 : 


“Xs 心 的 x 坐标 o 
y: 圆心 的 y 坐 标 。 
‘I: 圆 的 半径 。 


.addColorStop (stop，color) : 创建 一 个 颜色 渐变 点 ， 参 数 说 明 : 





stop: 表示 渐变 点 在 起 点 和 终点 中 的 位 置 ， 取 值 范 围 0 一 1。 


:color: 渐变 点 的 颜色 ， 取 值 范围 : rgb (255，0， 
0) ' 或 rgba (255，0，0，0.6) ' 或 #ff0000' 格 式 的 颜色 字符 串 。 


示例 代码 如 下 ， 效 果 见 图 5-4: 





<canvas canvas-id="myCanvas" style="width:100%; height:400px;"/> 


Page( { 
onReady : function() { 


var canvasContext = wx.createCanvasContext( 'myCanvas' ), 
linearGradient, circularGradient, colorStop; 


// 需要 根据 图 形 对 渐变 坐标 进行 换算 

linearGradient = canvasContext.createLinearGradient(0, 0, 100, 0); 
// 创建 渐变 时 ， 至 少 创建 2 个 渐变 点 ， 开 始 与 结束 
linearGradient.addColorSstop(0, 'black'); 
linearGradient.addColorStop(1, 'red'); 

// 填充 方形 

canvasContext ,setFillStyle( linearGradient ); 
canvasContext.fillRect( 10, 10, 100, 100 ); 










































































// 需要 根据 图 形 对 渐变 坐标 进行 换算 

circularGradient = canvasContext.createCircularGradient( 170,60,50 ); 
// 可 以 创建 多 个 渐变 点 

circularGradient.addColorStop(0, 'red'); 
circularGradient.addColorStop(0.16, 'orange'); 
circularGradient.addColorStop(0.33, 'yellow'); 
circularGradient.addColorStop(0.5, 'green'); 
circularGradient.addColorSstop(0.66, 'cyan'); 
circularGradient.addColorStop(0.83, 'blue'); 

circularGradient .addCcolorStop(1， 'purple'); 

// 填充 方形 
canvasContext ,SetFIJlStyle( circularGradient ); 
canvasContext.fillRect( 120，10，100，100 ); 



































canvasContext ,draw( );， 
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图 5-4 渐变 方法 示例 


(3) 线条 样式 
和 样式 设置 一 样 ， 线 条 样式 设置 会 全 局 作用 于 全 局 ， 如 果 没 有 禾 
盖 ， 后 续 绘 图 的 设置 将 沿用 之 前 的 设置 ， 线 条 样式 方法 如 下 : 


setLineWidth (lineWidth，〉: 设置 线条 的 宽度 ， 默 认 线 条 宽度 为 


1px。 人 参数 包括 lineWidth: 线条 的 宽度 ， 单 位 为 px。 


“setLineCap (lineCap) : 设置 线条 结束 端点 样式 ， 默 认 结 束 端 点 样 


式 为 square。 参 数 说 明 包括 lineCap: 线条 的 结束 端点 样式 ， 取 值 有 : 
“square: 端点 样式 为 正方 形 ， 不 会 截取 线条 宽度 。 
butt: 端点 样式 为 正方 形 ， 会 截取 线条 宽度 
:rTound: 端点 样式 为 圆 形 ， 不 会 截取 线条 宽度 。 


'SetLineJoin 〈lineJoin ) : 设置 线条 的 交点 样式 ， 默 认 交 叉 点 样式 为 
miter。 参 数 包 括 lineJoin: 线条 的 结束 交叉 点 样式 ， 取 值 有 : 


:bevel: 平角 。 
:round: 圆 角 。 


:miter: 人 尖 角 。 


SetMiterLimit () : 设置 最 大 斜 接 长 度 ， 和 斜 接 长 度 指 的 是 在 两 条 线 
交汇 处 内 角 和 外 角 之 间 的 距离 。 当 setLineJoin 为 miter 时 才 有 效 。 超 过 最 
大 倾斜 长 度 的 ， 连 接 处 将 以 lineJoin 为 bevel 来 显示 ， 参 数 包 括 
miterLimit: 最 大 斜 接 长 度 。 


示例 代码 如 下 ， 效 果 见 图 5-5: 





<canvas canvas-id="myCanvas" style="width:100%; height:700px;"/> 


var _fn; 


Page( { 
onReady : function() { 
Var canvasContext = wx.createCanvasContext( 'myCanvas' ); 


// 设置 线 宽度 
canvasContext ,SetLinewidth( 10 ); 











// 端点 样式 为 正方 形 ， 不 会 截取 线条 宽度 
canvasContext.setLineCap( 'square' ); 

_fn.drawLine( canvasContext, [10, 20], [150, 20] ); 
// 端点 样式 为 正方 形 ， 但 会 截取 线条 宽度 
canvasContext.setLineCap( 'butt' ); 

_fn.drawLine( canvasContext, [10, 40], [i150, 40] ); 
// 端点 样式 为 圆 形 ， 不 会 截取 线条 宽度 

canvasContext ,SetLineCcap( 'round' ); 

_fn.drawLine( canvasContext， [10，60]，[150，60] ); 


// 恢复 为 默认 线条 边界 


canvasContext.setLineCap( 'square' ) 


// 交叉 处 为 平角 
canvasContext.setLineJoin('bevel'); 
_fn.drawAngle( canvasContext, [10, 80] ); 
// 交叉 处 为 圆 角 

canvasContext ,SetLineJoin( 'round ' ) ; 
_fn.drawAngle( canvasContext, [50, 80] ); 
// 交叉 处 为 尖 

canvasContext .SetLineJoin( 'miter ')， 
fn.drawAngle( canvasContext， [90，80] ); 















































// 设置 交叉 处 为 尖 
canvasContext.setLineJoin('miter'); 





canvasContext.setMiterLimit(1); 
_fn.drawAngle( canvasContext, [10, 140] ); 


canvasContext.setMiterLimit(2); 
_fn.drawAngle( canvasContext, [50, 140] ); 
canvasContext.setMiterLimit(3); 

_fn.drawAngle( canvasContext, [90, 140] ); 


canvasContext .draw( ); 
} 
} ); 


_fn={ 
drawLine : function( canvasContext, start, end ) { 
canvasContext .beginPath'( ) 
canvasContext.moveTo(start[0], start[1]) 
canvasContext.1lineTo(end[0], end[1]) 
canvasContext.stroke( ); 


}, 


drawAngle : function( canvasContext, beginpPoint ) { 
canvasContext .beginPath'( ) 
canvasContext .moveTo(beginPoint[0]，beginPoint[1])， 
canvasContext.lineTo(beginPoint[0] + 40，beginPoint[1] + 20) 
canvasContext.lineTo(beginPoint[0], beginPoint[1] + 40) 
canvasContext.stroke() 
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图 5-5 ”线条 样式 示例 
(4 十 形 
定形 相关 方法 如 下 : 


Tect (X，y，width，height) : 创建 一 个 矩形 ， 创 建 后 需要 调用 
fill () 或 stroke() 方法 将 矩形 真正 画 到 <canvas/> 中 。 人 参数 说 明 如 下 : 


X: 矩形 路 径 左 上 角 的 x 坐标 。 


.y: 矩形 路 径 左 上 角 的 y 坐 标 。 
-width: 阜 形 路 径 的 宽度 。 
height: 矩形 路 径 的 高 度 。 


-fillRect (x，y，width，height〉: 填充 一 个 矩形 ， 填 充 时 需要 调用 
setFillStyle〈) 设置 颜色 ， 如 果 没 设置 默认 是 黑色 。 参 数 说 明 如 下 : 


X: 矩形 路 径 左 上 角 的 x 坐标 。 
.y: 矩形 路 径 左 上 角 的 y 坐 标 。 
-width: 矩形 路 径 的 宽度 。 
height: 矩形 路 径 的 宽度 。 


“strokeRect (X，y，width，height) : 画 一 个 非 填 充 的 矩形， 绘制 
前 需要 调用 setFillStroke 〈) 设置 线条 颜色 ， 如 没有 设置 默认 是 黑色 。 参 
数 说 明 如 下 : 


x: 和 矩形 路 径 左 上 角 的 x 坐 标 。 
y: 和 矩形 路 径 左上 角 的 y 坐 标 。 


width: 定形 路 径 的 宽度 。 


height: 矩形 路 径 的 宽度 。 


:clearRect (x，y，width，height〉: 清除 画布 上 在 该 矩形 区 域内 的 


内 容 ， 清 除 后 会 直接 显示 出 <canvas/> 背 景色 。 参 数 说 明 如 下 : 





X: 矩形 路 径 左 上 角 的 x 坐 标 。 
.y: 矩形 路 径 左 上 角 的 y 坐 标 。 
-width: 矩形 路 径 的 宽度 。 
height: 矩形 路 径 的 宽度 。 


示例 代码 如 下 ， 效 果 见 图 5-6: 





<canvas canvas-id="myCanvas" style="width:100%; height:700px;"/> 


Page( { 
onReady : function() { 

var canvasContext = wx.createCanvasContext( 'myCanvas' );，; 
// 绘制 线 框 矩形 
canvasContext.rect( 10, 10, 30, 30 ) 
canvasContext.stroke( ); 
canvasContext .draw() ， 
// 绘制 填充 矩形 
canvasContext.rect( 50, 10, 30, 30 ); 
canvasContext .fil]l(); 
canvasContext.draw( true ); // 传 入 参数 true， 表 示 接 着 上 次 继续 绘 甫 



































ss 














// 绘制 填充 矩形 

canvasContext.fillRect( 10，50，30，30 ); 
CanvasContext ,draw( true ); 

// 绘制 线 框 矩形 

















canvasContext .StrokeRect( 50，50，30，30 ); 
CanvasContext ,draw( true ); 














// 清除 矩形 区 域 
canvasContext.clearRect( 25, 25, 40, 40 ); 
CanvasContext ,draw( true ); 
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图 5-6 ”和 矩形 方法 示例 
(5) 路 径 


路 径 绘制 并 不 会 在 画布 上 绘制 形状 ， 而 是 创建 一 个 线条 路 径 ， 创 建 
的 路 径 可 被 sroke〈) 绘制 线条 ， 也 可 被 f 了 1〈() 填充 区 域 ， 绘 制 路 径 开 
始 时 需要 调用 beginPath〈) 方法 ， 结 束 时 需要 调用 closePath 〈) 方法 ， 
上 文 rect《〈) 方法 可 认为 是 绘制 矩形 路 径 的 一 个 快捷 方法 ， 通 过 路 径 方 
法 组 合 ， 我 们 可 以 绘制 任何 形状 图 形 。 路 径 方法 如 下 : 


beginPath〈) : 开始 创建 一 个 路 径 ， 需 要 调用 人 名] 或 者 stroke 才 会 使 
用 路 径 进行 填充 或 朱 边 。 在 最 开始 的 时 候 相 当 于 调用 了 一 次 
beginPath〈() 。 同 一 个 路 径 内 的 多 次 setFillStyle〈) 、 





setStrokeStyle () 、setLineWidth 〈() 等 设置 ， 以 最 后 一 次 设置 为 准 。 
y 


closePath〈() : 关闭 一 个 路 径 。 关 闭路 径 会 连接 起 点 和 终点 。 如 采 
关闭 路 径 后 没有 调用 f 缮 〈) 或 者 stroke〈) 并 开启 了 新 的 路 径 ， 那 之 前 
的 路 径 将 不 会 被 泻 染 。 





-fill《〉 : 对 当前 路 径 中 的 内 容 进 行 填充 。 默 认 的 填充 色 为 黑色 。 
如 果 当 前 路 径 没 有 闭合 ，f 记 () 方法 会 将 起 点 和 终点 进行 连接 ， 然 后 填 
充 。fil () 填充 的 的 路 径 是 从 beginPath() 开始 计算 ， 但 是 不 会 将 
fillRect〈() 包含 进去 。 





'stroke () : 画 出 当前 路 径 的 边框 。 默 认 颜 色色 为 黑色 。 
stroke 〈) 描绘 的 的 路 径 是 从 beginPath () 开始 计算 ， 但 是 不 会 将 
strokeRect () 包含 进去 。 





:moveTo (x,，y) : 把 路 径 移动 到 画布 中 的 指定 点 ， 但 不 创建 线 
条 。 参 数 说 明 如 下 : 


X: 目标 位 置 的 x 坐 标 。 





y: 目标 位 置 的 y 坐 标 。 





lineTo (x，y) : 添加 一 个 新 点 ， 然 后 在 画布 中 创建 从 该 点 到 最 后 
指定 点 的 线条 。 参 数 包括 x、y， 同 上 。 


-arc (XxX,，y, Ir，SAngle，eAngle，counterclockwise) : 添加 一 个 弧 
形 路 径 到 当前 路 径 ， 顺 时 针 绘 制 ， 创 建 一 个 圆 可 以 用 arc〈) 方法 指定 
其 实 弧 度 为 0， 终 止 弧度 为 2*Math.PI。 参 数 说 明 如 下 : 


x: 圆 的 x 坐 标 。 
y: 圆 的 y 坐 标 。 


工区 圆 的 半径 。 





SAngle: 起 始 弧 度 ， 单 位 弧度 (在 3 点 钟 方 则 〉。 
-eAngle: 终止 弧度 。 


counterclockwise: 可 选 。 指 定 弧 上 度 的 方 同 是 逆 时 针 还 是 顺 时 针 。 
默认 是 false， 即 顺 时 针 。 


.quadraticCurveTo (cpx，cpy，X，y) : 创建 二 次 方 贝 塞 尔 曲线 ， 
曲线 的 起 始点 为 路 径 中 前 一 个 点 。 参 数 说 明 如 下 : 


cpx: 贝 赛 尔 控制 点 的 x 坐 标 。 


“cpy: 贝 竖 尔 控制 点 的 y 坐 标 。 


X: 结束 点 的 x 坐标 。 
y: 结束 点 的 y 坐 标 。 


:bezierCurveTo (cplx，cply，cp2x，cp2y，X，y) : 创建 三 次 方 贝 
考 尔 曲线 ， 曲 线 的 起 始点 为 路 径 中 前 一 个 点 。 参 数 说 明 如 下 : 


:CD1x: 第 一 个 贝 塞 尔 控制 点 的 x 坐 标 。 
-cply: 第 一 个 贝 塞 尔 控制 点 的 y 坐 标 。 
:cp2x: 第 二 个 贝 塞 尔 控制 点 的 x 坐标 。 
cp2y: 第 二 个 贝 塞 尔 控 制 点 的 y 坐 标 。 
X: 结束 点 的 x 坐 标 。 
y: 结束 点 的 y 坐 标 。 


示例 代码 如 下 ， 效 果 见 图 5-7: 
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图 5-7 ”路径 方法 示例 





<canvas style="width: 100%; height: 700px;" canvas-id="myCanvas"></canvas> 
Var _fn; 


Page( { 
onReady : function() { 
Var context = wx.createCanvasContext( 'myCanvas' ); 


// 绘制 三 角形 线条 

_fn.drawTrianglePath( context, [10, 60] ); 
context.stroke( ); 

context .draw( ); 

// 绘制 扇形 
_fn.drawSectorpPath( context, [60, 10], 55, 0, 60 ) 
context.setStrokestyle( 'black' ); 
context.setLinewidth( 5 ); 

context.setFillStyle( 'gray' ); 

context.stroke( ); 

context .fill(); 

context.draw( true ); 

// 绘制 二 次 贝 塞 尔 曲线 

Context ,SetLinewidth( 1 ); 






































} 
} ); 


_fn 


// 绘制 三 角形 


_fn.drawQuadraticCurve( context, 
context.stroke(); 
context. Craw( true ); 


// 绘制 三 











次 贝 塞 全 尔 旧 








_fn.drawBezierCurve( context, 


曲线 


context.stroke(); 
context.draw( true ); 


= 二 




















drawTrianglepath 


canvasContext 
// 开始 路 径 
canvasContext. 
// 绘制 3 条 边 
canvasContext. 
canvasContext 
canvasContext. 
// 关闭 路 径 


canvasContext 


绘制 扇形 











drawSectorPath 


canvasContext 
// 开始 路 径 

canvasContext 
canvasContext. 
canvasContext 
canvasContext. 
// 开始 路 径 

canvasContext . 





function( canvasContext, 
beginPos[1] ); 


,moveTo( beginPos[0]， 


beginPath( ) ， 


.ClosePath(); 


.beginpath(); 
lineTo( beginPos[9] + radius，beginPos[1] ); // 绘制 边线 


}, 
// 绘制 二 次 贝 塞 尔 曲线 路 径 


drawQuadraticCurve : 


canvasContext ,beginPath() ， 


canvasContext.moveTo(startPoint[0], 


[10, 70], 


[110, 70], 


lineTo( beginpos[0] + 30, beginpPos[1] 
.lineTo( beginPos[0] + 60，beginPos[1] ); 
lineTo( beginPos[0], 


function( canvasContext, 
.moveTo( beginPos[0],beginpPos[1] ); 


beginpPos, 


[10, 170], 


[110, 150], 


beginPos ) { 


beginPos[1] ); 


radius, 





startPoint[1]); 


[100, 70] ); 


[210, 150], 


- 50 ); 


startAngle, endAngle ， 


[210, 70] ); 


1 


,arc( beginPos[0], beginpPos[1], radius, startAngle*Math.PI / 180, ¢ 
lineTo( beginPos[6],beginPos[1] ); // 绘制 边线 
closePath(); 

function( canvasContext, startPoint, controlPoint, endPoint ， 


canvasContext.quadraticCurveTo(controlPoint[0], controlPoint[1], endPoint[0], er 











// 这 





里 不 需要 关闭 路 径 ， 人 否则 路 径 将 自动 首尾 








】， 

// 绘制 三 次 贝 塞 尔 曲线 路 径 
drawBezierCurve 
canvasContext.beginpath( ); 


canvasContext.moveTo( startPoint[0], 








相连 


: function( canvasContext, 


StartPoint， 


startPoint[1] ); 


controlPoint1, 


controlPoint 


canvasContext .bezierCurveTo(controlPoint1[0], controlPoint1[1], controlPoint2[0- 

















// 这 里 








不 需 


要 关闭 路 径 ， 


否则 路 径 将 自动 首尾 














尾 相连 





变形 相关 方法 会 
可 以 相互 欠 代 ， 可 以 认为 变形 是 对 整体 坐标 体系 的 变形 。 


如 下 : 


(6) 变形 





整体 影响 之 后 绘图 方法 的 坐标 体系 ， 每 个 方法 之 前 


变形 相关 方法 


:Scale 〈《scaleWidth，scaleHeight) : 在 调用 scale 方 法 后 ， 之 后 创建 
的 路 径 其 横 纵 坐标 会 被 缩放 。 多 次 调用 scale， 倍 数 会 相 乘 。 缩 放 后 不 仅 
影响 图 形 坐 标 ， 同 时 影响 线条 宽度 ， 可 认为 是 对 画布 整体 进行 了 缩放 。 
参数 说 明 如 下 : 


“scaleWidth: 横 坐 标 缩放 的 倍数 (1=100%，0.5=50%， 
2=200%) 。 


scaleHeight: 纵 坐 标 轴 缩 放 的 倍数 〈1=1009%6，0.5=509%6， 
2=200%) 。 


rotate (rotate) : 以 原点 为 中 心 ， 原 点 可 以 用 translate 方 法 修改 。 
顺 时 针 旋 转 当 前 坐标 轴 。 多 次 调用 rotate， 旋 转 的 角度 会 厨 加 。 参 数 包 
括 rotate: 旋转 角度 ， 以 弧度 计 (degrees*Math.PL/180，degrees 范 围 为 0 
一 360) 。 


translate (X，y) : 对 当前 坐标 系 的 原点 〈0，0) 进行 变换 ， 默 认 
的 坐标 系 原 点 为 页 面 左上 角 。 参 数 说 明 如 下 : 





X: 水 平 坐标 平移 量 。 





y: 竖 直 坐标 平移 量 。 


本 节 示 例 中 多 种 变形 效果 可 相互 合 加 ， 示 例 代码 如 下 ， 效 果 见 图 5- 
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坐标 放大 2 倍 
旋转 30 度 
原点 坐标 x、y 均 加 10px 


绘制 正方 形 








图 5-8 ”变形 方法 示例 





<canvas style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 
<button bindtap="scale"> 坐 标 放 大 2 倍 </button> 

<button bindtap="rotate"> 旋 转 30 度 </button> 

<button bindtap="translate"> 原 点 坐标 x、y 均 加 10px</button> 

<button bindtap="drawReact"> 绘 制 正方 形 </button> 




















Page( { 
canvasContext : null, 
onReady : function() { 
this,canvasContext = wx.createCanvasContext( 'myCanvas' ); 


translate : function() { 

this.canvasContext.translate( 10，10 ); // 横 纵 坐 标 均 移 动 10px 
} 
rotate : function() { 

this.canvasContext .rotate( 30 * Math.PI / 180 ); // 旋转 30 度 
}, 


Scale : function() { 
this.canvasContext.scale( 2，2 ); // xy 均 放 大 2 倍 ， 放 大 后 ， 线 条 也 相应 放大 


学 

drawReact : function() { 

Var context = this.canvasContext,; 
context.restore(); // 恢复 绘制 条 件 , 并 弹 栈 。 
context.rect( ©0, 090, 15, 15 ); 
context.stroke(); 
context.draw( true ); // 基于 上 次 图 形 继续 绘 币 



































i 














(7》 文字 


文字 相关 方法 能 将 文字 输出 到 画布 中 ， 字 体 颜 色 能 通过 
setFillStyle〈) 方法 修改 ， 其 方法 包括 flText (text，Xx，y) : 在 画布 上 
绘制 被 填充 的 文本 。 参 数 说 明 如 下 : 


-text: 在 画布 上 输出 的 文本 。 


X: 绘制 文本 的 左上 角 x 坐 标 位 置 。 





y: 绘制 文本 的 左上 和 角 y 坐 标 位 置 。 





“setFontSize 〈fontSize) : 设置 字体 的 字号 。 参 数 包 括 fontSize: 字 
体 的 字号 。 


示例 代码 如 下 ， 效 果 见 图 5-9: 





<canvas style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 
Var context = wx.createCanvasContext( 'myCanvas' ); 


context .fillText(' 中 文 '，10,，20) 
// 设置 字体 大 小 
context.setFontSize( 24 ); 


// 改变 字体 颜色 
context.setFillStyle( 'red' ); 
context.fillText('English', 100, 20) 





context .draw( ); 
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图 5-9 ”字体 方法 示例 


(8) 图 片 


图 片 方法 只 有 一 个 drawimage (imageResource，X，y，width， 
height) : 用 于 在 画布 上 绘制 图 片 。 方 法 如 下 : 


-imageResource: 所 要 绘制 的 图 片 资源 ， 可 以 是 网 络 资源 ， 也 可 以 
征 本 地 资源 相对 路 径 。 


X: 图像 左 上 角 的 x 坐标 。 
:y: 图 像 左 上 角 的 y 华 标 。 
width: 图 像 宽度 。 
height 图 像 高 度 。 


示例 代码 如 下 ， 效 果 见 图 5-10: 





<canvas style="width: 100%; height: 200px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function( ) { 
Var context = wx.createCanvasContext( 'myCanvas' ); 
context.drawImage( 'http://www.qq1234.org/uploads/allimg/140526/ 3_140526112044_ 
context .draw( ); 


} ); 


二 一 


| 


[x Console 
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图 5-10 ”图 片 方法 


C9) 混合 


昆 合 方法 只 有 一 个 setGlobalAlpha (alpha) : 设置 全 局 画笔 透明 


人 
CI 





NS 


度 。 参 数 包 括 alpha: 透明 度 ，0 表 示 完 全 透明 ，1 表 示 完 全 不 透明 。 


示例 代码 如 下 ， 效 果 见 图 5-11: 





<canvas style="width: 100%; height: 300px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 


var context = wx.createCanvasContext( 'myCanvas' ) 


context.setFillstyle( 'blue' ); 

context.fillRect(10, 10, 100, 100); 

context.setGlobalAlpha( 0.5 ); 

context.fillRect(50, 50, 100, 100); 

// 对 图 片 也 生效 context.drawImage( 'http://www.qq1234.org/uploads/allimg/ 140526/: 
context .draw( ); 
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图 5-11 混合 方法 示例 
(10) 其 他 


其 余 一 些 方法 主要 涉及 绘画 步骤 和 绘制 方式 ， 涉 及 的 方法 如 下 : 





'Save () : 保存 当前 的 绘图 上 下 文 ， 每 次 保存 类 似 将 当前 设置 进行 
压 栈 ， 可 以 用 于 保存 一 些 默 认 设 置 ， 需 要 注意 的 是 save〈) 方法 仅 用 于 
保存 当前 绘图 上 下 文 状态 ， 而 不 是 用 于 保存 当前 操作 步骤 。 














Testore () : 恢复 之 前 保存 的 绘图 上 下 文 。 


:draw (reserve) : 将 之 前 在 绘图 上 下 文中 的 描述 (路 径 、 变 形 、 
样式 ) 画 到 canvas 中 。 参 数 包括 reserve: 非 必 填 ， 指 本 次 绘制 是 否 接 着 
上 一 次 绘制 ， 即 reserve 参 数 为 false， 则 在 本 次 调用 drawCanvas 绘 制 之 前 
native 层 应 先 清空 画布 再 继续 绘制 ; 奉 reserver 参 数 为 tue， 则 保留 当前 
画布 上 的 内 容 ， 本 次 调用 drawCanvas 绘 制 的 内 容 履 盖 在 上 面 ， 默 认为 


false。 


示例 代码 如 下 ， 效 果 见 图 5-12: 





<canvas style="width: 100%; height: 300px;" canvas-id="myCanvas"></canvas> 


Page( { 
onReady : function() { 
Var context = wx.createCanvasContext( 'myCanvas' ); 


context.setFillStyle( 'red' ); 

context. save( ); 

context.setFillSstyle( 'blue' 

| fillRect( 10, 10, 100, "100 ); 
/ 恢复 到 之 前 红色 设 

cr restore() 

context.fillRect( 120, 10, 100, 100 ); 

context .draw( ); 
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图 5-12 ”其 他 方法 示例 


5.7.6 下拉 刷新 


下 拉 刷 新 API 包 括 : 





.onPullDownRefresh 〈callback) 监听 下 拉 刷 新 事件 需要 在 Page 中 年 
义 onPull-DownRefresh 处 理 函 数 。 监 听 下 拉 事 件 时 需要 在 app.json 配 置 中 
开启 window 配 置 的 enablePullDownRefresh 选 项 。 当 处 理 完 数据 刷新 后 ， 
可 以 调用 wx.stopPull-DownRefresh 方 法 停止 当前 页 面 的 下 拉 刷 新 。 





.WwWX.StopPullDownRefresn 〈) 停止 当前 页 面 下 拉 刷 新 。 


示例 代码 如 下 : 





Page( { 
// 监听 当前 页 面 下 拉 刷 新 
onPullDownRefresh : function() { 
// 停止 当前 页 面 下 拉 刷 新 






































wx.stopPullDonwRefresh( ); 
} 
} ); 
ss 


5.8 ”开放 接口 


考虑 到 小 程序 的 登录 和 支付 相对 难 理解 ， 在 第 8 章 我 们 特意 整理 一 
个 打 芮 App， 以 展示 在 项 目 中 如 何 使 用 登录 、 文 付 相关 API。 








在 小 程序 中 ， 登 录 分 2 步 ， 第 一 步 需要 获取 登录 赁 证， 第 二 步 用 登 
录 和 凭证 获取 用 户 登 录 态 信息 ， 登 录 态 信息 可 用 于 后 续 文 付 等 流程 。 


1.wx.login 《Object ) 











调用 接口 获取 登录 凭证 (code) 进而 换取 用 户 登 录 态 信息 ， 包 括 用 
户 唯 一 表示 (openid)〉 及 本 次 登录 的 会 话 密 钥 (session_key) ， 用 户 数 
据 的 加 解密 通信 和 需要 依赖 会 话 密 钥 完 成 ，Object 参 数 属性 如 下 : 


success: 接口 调用 成 功 的 回调 函数 ， 返 回 参数 如 下 : 
:errMsg: 调用 结果 。 


code: 用 户 允 许 登 录 后 ， 回 调 内 容 会 市 上 code《〈 有 效 期 五 分 钟 ) ， 
开发 者 需要 将 code 发 送 到 开发 者 服务 器 后 台 ， 使 用 code 换 取 session_key 
API， 将 code 换 成 openid 和 session_key。 


fail: 接口 调用 失败 的 回调 函数 。 


“complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
行 ) 


示例 如 下 : 





wx.login( { 
success : function( res ) { 
if ( !res,code ) { 
return; 


} 
// 这 里 建议 调用 后 台 接 口 进行 登录 态 转换 、 保 存 工作 
wx.request({ 
Url : 'https://myserver.com/login"', 
data : { 
code : res.code 












































Success : function( loginInfo ) { 
console.1og( ' 登 录 成 功 ' )， 


} 
}); 
} ); 











2.code 换 取 session_key， 获 取 用 户 信息 


调用 wx.login〈) 获取 code 后 我 们 需要 在 5 分 钟 内 用 code 换 取 
session_key、openid 等 用 户 信息 ， 为 此 官方 暴露 了 一 个 HTTP 接 口 ， 尽 管 
我 们 可 以 直接 通 a 
session_key 是 对 用 户 数 据 进 行 加 密 签名 的 密 钥 ,为 了 自身 应 用 安全 ， 
量 使 用 后 台 服 务 器 调用 这 个 接口 ， 保 存 登录 信息 ， 返 回 给 小 程序 前 台 ， 
接口 地 址 如 下 : https:Wapi.weixin.qq.comy/sns/jscode2session ? 

















appid=APPID&secret=SECRET&]js_code=JSCODE&grant_type=authorizati( 


接口 请 求 参数 : 





:appid: 小 程序 唯一 标识 ， 在 开发 者 后 台 “ 设 置 开发 设置 ”中 可 找 
到 。 


'Secret: 小 程序 的 app secret， 在 开发 者 后 台 “ 设 置 开发 设置 ”中 可 
找到 。 


.js_code: 调用 wx.login 〈) 登录 时 获取 的 code。 
.grant_type: 填写 为 “authorization_code”。 

接口 返回 参数 : 

:openid: 用 户 唯 一 标识 。 

“session_key: 会 话 密 钥 。 


expires_in: 会 话 有 效 期 ， 以 秒 为 单位 ， 例 如 2592000 代 表 会 话 有 效 
期 为 30 天 。 


返回 值 示 例如 下 : 





// 正 常 返 回 的 JSON 数 据 包 
"openid": "OPENID", 
"session_ key": "SESSIONKEY" 
"expires_in": 2592000 


} 
// 错 误 时 返回 JSON 数 据 包 ( 示 例 为 Code 无 效 ) 
t 








"errcode": 40029, 
"errmsg": "invalid code" 


} 





3. 登 录 态 维护 





开发 中 ， 每 个 项 目 应 该 利用 后 台 自 己 维护 登录 态 ， 不 能 直接 把 


seeion_key、openid 等 字段 作为 用 户 的 标识 或 者 session 的 标识 ， 具 体 使 用 
场景 可 参考 第 8 章 





4.wx.checkSession (Object) 








今 查 登录 态 是 否 过 期 ，Object 参 数 属性 如 下 : 
“success: 接口 调用 成 功 的 回调 函数 ， 登 录 态 未 过 期 。 
.fail: 接口 调用 失败 的 回调 函数 ， 登 录 态 已 过 期 。 


:complete: 接口 调用 结束 的 回调 函数 〈 调 用 成 功 、 失 败 都 会 执 


1 


示例 如 下 : 





wx.checkSession(f{ 
success: function(){ 
// 登 录 态 未 过 期 


}, 
fail: function(){ 
// 登 录 态 过 期 














} 
}) 





5.8.2 用 成 信息 


wx.getUserInfo (Object) 





获取 用 户 信息 ， 需 要 首先 调用 wx.login 接 口 ，Object 参 数 属性 如 下 : 
success: 接口 调用 成 功 的 回调 函数 ，success 返 回 参 数 属性 如 下 : 
-userInfo: 用 户 信 息 对 象 ， 不 包 仿 openid 等 敏感 信息 。 

TawData: 不 包含 敏感 信息 的 原始 数据 字符 串 ， 用 于 计算 签名 。 


“signature: 使 用 shal (rawData+sessionkey) 得 到 的 字符 串 ， 用 于 校 
验 用 户 信息 。 


encryptData: 包括 敏感 数据 在 内 的 完整 用 户 信息 的 加 密 数 据 。 
iv: 加 密 算 法 的 初始 回 量 。 
-fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 (调用 成 功 、 失 败 都 会 执 
行 ) 。 


示例 代码 如 下 : 


wx.getUserInfo({ 
success : function( res ) { 
console.1og( res ); // 打印 出 用 户 信息 


} 
}); 
































对 encryptedData 解 密 后 可 得 到 完整 的 用 户 信息 ， 解 密 算 法 可 
考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html ， 解 压 后 
的 结构 如 下 : 


Wp 





"openId": "OPENID", 
"nickName": "NICKNAME", 
"gender": GENDER, 

"city" 1 "CITY", 
"province": "PROVINCE", 
"country": "COUNTRY", 
"avatarUrl": "AVATARURL", 
"unionId": "UNIONID", 
"watermark": 


"appid":"APPID", 
"timestamp" :TIMESTAMP 





其 中 unionId 用 于 区 分 不 同 应 用 下 的 用 户 吴 份 ， 它 在 同一 个 微 信 开放 
平台 账号 下 的 移动 应 用 、 网 站 应 用 和 公共 账号 (包括 小 程序 ) 是 全 局 唯 
一 的 ， 而 openId 只 在 同一 应 用 体系 中 是 唯一 的 ， 即 在 不 同 公共 号 下 的 
openId 可 能 重复 ， 但 unionId 不 会 重复 。 即 同一 用 户 ， 对 同一 个 微 信 开放 
平台 下 的 不 同 应 用 ， 登 录 后 unionId 是 相同 的 ，openId 是 不 相同 的 。 获 取 
unionId 首 先 需要 将 小 程序 接 入 微 信 开放 平 合 ， 开 发 者 可 以 登录 微 信和 开放 
平台 (open.weixin.qq.com) ， 进 入 “管理 中 心 -> 公众 账号 -> 绑 定 公众 帐 
号 ”， 添 加 账号 。 如 宁 是 第 一 次 添加 需要 登录 微 信 开发 者 平台 ， 进 入 “ 账 
号 中 心 -> 开 发 者 资质 认证 ?， 完 成 开发 者 资质 认证 。 


5.8.3 ”短信 支付 


本 节 只 做 简单 的 API 讲 解 ， 支 付 具 体 使 用 方式 可 参考 打 党 App。 
wx.requestPayment (Object) ; 


用 于 发 起 微 信 文 付 ， 关 于 文 付 可 参考 打 息 App，Object 参 数 属性 如 
下 


:timestamp: 时 间 戳 ， 从 1970 年 1 月 1 日 00: 00: 00 至 今 的 秒 数 ， 即 
当前 的 时 间 。 


.nonceStr: 随机 字符 串 ， 长 度 为 32 个 字符 以 下 。 


:package: 统一 下 单 接口 返回 的 prepay_id 参 数值 ， 提 交 格 式 如 : 
prepay_id=*。 


signType: 签名 算法 ， 暂 文 持 MD5。 
.paySign: 签名 。 
"success: 接口 调用 成 功 的 回调 函数 。 


fail: 接口 调用 失败 的 回调 函数 。 


complete: 接口 调用 结束 的 回调 函数 《〈 调 用 成 功 、 失 败 都 会 执 
和 


示例 代码 如 下 : 





wx.requestPayment( { 
'timeStamp' : '', 
'noncestr' :; ， 


} ); 





5.8.4 ”模板 消 奶 





对 于 使 用 过 微 信 的 用 户 来 讲 模板 消 轧 一 点 也 不 陌生 ， 了 最 币 见 的 融 是 
通过 微 信 文 付 后 ， 微 信 文 付 推送 的 文 付 消 妃 惑 是 模板 消 妃 。 在 小 程序 中 
我 们 也 能 使 用 模板 消息 给 用 户 推送 信息 。 需 要 注意 的 是 只 有 微 信 6.5.2 及 
以 上 版 本 能 文 持 模 板 功 能 ， 低 于 该 版 本 将 无 法 收 到 模板 消 居 。 

















1. 调 用 模板 消息 接口 











发 送 模板 信息 需要 通过 POST 方式 调用 微 信 后 台 接 口 ， 接 口 调用 可 
以 是 前 台 调 用 ， 也 可 以 是 后 台 调 用 ， 接 口 地 址 为 : 


https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send? 


access token=ACCESS_ TOKEN 
post 参 数 如 下 : 


touser: 接收 者 “〈 用 户 ) 的 openid， 通 常 是 当前 使 用 者 的 openid， 
必 填 项 。 








template_id: 所 需 下 发 的 模板 消息 的 d， 必 填 项 。 


:page: 点 击 模板 卡片 后 的 跳 转 页 面 ， 仪 限 本 小 程序 内 的 页 面 。 支 
持 带 参数 ，【〔 示 例 index? foo=bar) 。 该 字段 不 填 则 模板 无 跳 转 。 


.form_id: 表单 提交 场景 下 ， 为 submit 事 件 带 上 的 formId; 支付 场景 
下 ， 为 本 次 支付 的 prepay_id， 必 填 项 。 


-data: 模板 内 容 ， 不 填 则 下 发 空 模板 ，data 中 keyword 对 应 模板 
keyword， 必 填 项 。 


color: 模板 内 容 字 体 的 颜色 ， 不 填 默 认 黑 色 。 
-emphasis_keyword: 模板 需要 放大 的 关键 词 ， 不 填 则 默认 无 放大 。 


示例 代码 如 下 : 





"touser": "OPENID", 
"template_id": "TEMPLATE_ID", 
"page": "index", 
"form_id": "FORMID", 
"data": { 
"keyword1": { 
"yalue" : " 暮 片 "， 
"color": "#173177" 





}, 

"keyword2": { 
"value": "2015 年 01 月 05 日 12:30", 
"color™": "#173177" 











} 
"emphasis_keyword": "keyword1 .DATA" 





接口 返回 数据 : 





{"errcode": 0,"errmsg": "ok"} 





返回 数据 中 第 见 错误 码 有 : 


.40037: template_id 不 正确 。 

41028: form_id 不 正确 ， 或 者 过 期 。 
.41029: form_id 已 被 使 用 。 
.41030: page 不 正确 。 


.45009: 接口 调用 超过 限额 (目前 默认 每 个 帐号 日 调用 限额 为 100 
万 ) 。 





调用 模板 消息 时 有 几 个 参数 非常 关键 ， 分 别 是 : access_token 〈 接 
口 url 参 数 ) ，form_id，template_ id 和 data。 接 下 来 我 们 一 一 分 析 这 些 参 
数 。 


(1) template_ id 和 data 


template_id 是 需要 调用 模板 的 d，data 为 当前 模板 所 需要 的 数据 ， 小 
程序 所 有 模板 都 在 微 信 公 共 平 台 (https://mp.weixin.qq.com/ ) -> 模板 消 
恩 进行 管理 ，template_id 可 在 模板 管理 界面 中 直接 复制 ， 如 图 5-13 所 


dl 


还 可 添 jn024 个 


关键 河 模板 ID 


物 届 名 称 、 付 计时 间 juUnz_AOFNK2QI7cGnQ8S9RncybC3XWwxt 舌 制 





图 5-13 ”获取 template_id 


没有 模板 时 可 以 创建 一 个 新 模板 ， 微 信 定 制 了 多 种 类 型 的 模板 ， 
个 模板 可 以 选取 需要 填写 哪些 key 值 ， 这 些 key 值 会 根据 请 求 参数 data 局 
性 进行 填写 ， 选 取 好 后 会 生成 相应 的 模板 如 图 5-14 所 示 。 








© iUnZ_AOFNK2QI7cGnQ8S9RncybC3XWvxt_JO4Z5jFhw ”复制 
© 


付款 成 功 通 知 
付款 成 功 通知 
2017 年 01 月 物品 名 称 | {{keyword1.DATA}} 

付款 时 间 {tkeyword2.DATA}} 











物品 名 称 ”果汁 
付款 时 间 ”2016 年 9 月 9 日 








图 5-14 ”模板 详情 


当前 模板 按 上 文 示 例 代 码 请 求 数据 会 给 用 户 推 送 一 条 物品 名 称 
为 “ 茵 片 ”， 付 款 时 间 为 “2015 年 01 月 05 日 12: 30” 的 付款 成 功 通知 消息 。 


(2) form id 


form_id 的 值 由 页 面 <form/> 组 件 submit 方 法 生成 ， 获 取 时 需要 将 
<form/> 的 reportrsubmit 属 性 值 为 tue， 此 时 点 击 提交 按钮 触发 submit 事 件 
时 ， 可 通过 参数 获取 。 





示例 代码 如 下 : 





<form report-submit bindsubmit="submit"> 
<button form-type="submit"> 提 交 </button> 
</form> 


Page( { 
submit : function( e { 
console.log( e.detail.formId ); 


} 
} ); 








当 用 户 完 成 支付 行为 时 ，form_id 的 值 应 为 统一 下 单 接口 返回 的 
prepay_id。 


(3) access token 





access_token 是 全 局 唯一 的 接口 调用 凭证， 调用 很 多 接口 都 需要 使 
用 access_token。access_token 存 储 至 少 需 要 512 个 字符 空间 ， 获 取 


access_token 需 要 通过 get 方 式 调 用 微 信 后 台 接 口 : 





https://api.weixin.qq.com/cgi-bin/token? 


grant_type=client_credential&appid=APPID&secret=APPSECRET 


其 参数 如 下 : 


-grant_type: 接口 类 型 ， 获 取 access_token 时 填写 dient_credential， 
必 填 项 。 


appid: 第 三 方 用 户 唯一 凭证 ， 即 小 程序 appid， 可 在 微 信 公共 平台 
官网 -> 设置 -> 开发 设置 中 获取 ， 必 填 项 。 


“secret: 第 三 方 用 户 唯 一 凭证 密 钥 ， 即 appsecret， 可 在 微 信 公 
台 官 网 -> 设置 -> 开发 设置 中 获取 ， 必 填 项 。 


正常 情况 下 ， 微 信 会 返回 如 下 JSON 数 据 : 





{"access_token": "ACCESS_TOKEN"， "expires_in": 7200} 





返回 数据 中 expires_in 指 凭证 有 效 时 间 ， 单 位 秒 。 由 此 可 看 出 
access_token 有 效 时 间 为 2 小 时 ， 失 效 后 需要 定时 刷新 ， 重 复 刷新 将 导致 
上 次 获取 的 access_token 失 效 ， 同 时 access_token 有 失效 时 间 而 且 每 天 调 
用 接口 次 数 有 限制 ， 如 果 每 个 服务 〈 或 小 程序 客户 端 ) 单独 调用 接口 获 
取 access_token 将 会 导致 access_token 不 一 致 ， 产 生 冲 突 ， 导 致 服务 不 稳 
定 ， 所 以 我 们 通常 利用 中 控 服 务 器 单独 维护 access_token， 系 统 所 有 服 
务 都 依赖 这 个 服务 获取 access_token， 这 样 能 保证 access_token 的 一 致 性 
和 有 效 生命 周期 ， 获 取 access_token 方 式 如 下 : 





.为 了 保密 appsecrect， 第 三 方 需要 一 个 access_token 获 取 和 刷新 的 中 
控 服 务 器 。 而 其 他 业务 逻辑 服务 器 所 使 用 的 access_token 均 来 目 于 该 中 
控 服 务 占 ， 不 应 该 各 目 去 刷新 ， 耕 则 会 造成 access_token 禾 新 而 影响 业 


务 : 


目前 access_token 的 有 效 期 通过 返回 的 expires_in 来 传达 ， 目 前 是 
7200 秒 之 内 的 值 。 中 控 服务 器 需要 根据 这 个 有 效 时 间 提 前 去 刷新 新 
access_token。 在 刷新 过 程 中 ， 中 控 服 务 器 对 外 输出 的 依然 是 老 
access_token， 此 时 公众 平台 后 台 会 保证 在 刷新 短 时 间 内 ， 新 老 
access_token 都 可 用 ， 这 保证 了 第 三 方 业务 的 平滑 过 渡 ; 





“access_token 的 有 效 时 间 可 能 会 在 未 来 有 调整 ， 所 以 中 控 服务 占 不 
仅 需 要 内 部 定时 主动 刷新 ， 还 需要 提供 被 动 刷新 access_token 的 接口 ， 
这 样 便于 业务 服务 器 在 API 调 用 获知 access_token 已 超时 的 情况 下 ， 可 以 
触发 access_token 的 刷新 流程 。 


2. 下 发 条 件 


调用 模板 信息 需要 满足 一 些 相 应 条 件 ， 按 类 型 可 将 这 些 条 件 分 为 文 
付 和 提交 表单 : 











` 文 付 当 用 户 在 小 程序 内 完成 过 文 付 行为 ， 可 允许 开发 者 问 用 户 在 7 
天 内 推送 有 限 条 数 的 模板 消息 《1 次 文 付 可 下 发 1 条 ， 多 次 文 付 下 发 条 数 
独立 ， 互 相 不 影响 ) 。 








-提交 表单 当 用户 在 小 程序 内 发 生 过 提交 表单 行为 且 该 表单 声明 为 

要 发 模板 消息 的 ， 开 发 者 需要 问 用 户 提 供 服务 时 ， 可 允许 开发 者 辣 用 户 

在 7 天 内 推送 有 限 条 数 的 模板 消息 (1 次 提交 表单 可 下 发 1 条 ， 多 次 提交 
下 发 条 数 独立 ， 相 互 不 影响 ) 。 





3. 模 板 管理 规则 

(1) 模板 审核 

新 建 的 模板 需要 通过 审核 才能 使 用 ， 审 核 规则 如 下 : 

标题 : 

1) 标题 不 能 存在 相同 。 

2) 标题 意思 不 能 存在 过 度 相似 。 

3) 标题 必须 以 “提醒 ”或 “通知 ”结尾 。 

4) 标题 不 能 带 特 殊 符 号 、 个 性 化 字 词 等 没有 行业 通用 性 的 内 容 。 
5) 标题 必须 能 体现 具体 服务 场景 。 


6) 标题 不 能 涉及 营销 相关 内 容 ， 包 括 不 限于 : 消费 优惠 类 、 购 物 
返利 类 、 商 品 更 新 类 、 优 惠 券 类 、 代 人 金 券 类 、 红 包 类 、 会 员 卡 类 、 积 分 
类 、 活 动 类 等 营销 倾向 通知 。 





关键 词 : 


1) 同一 标题 下 ， 关 键 词 不 能 存在 相同 。 


2) 同一 标题 下 ， 关 键 词 不 能 存在 过 度 相似 。 


3) 关键 词 不 能 带 特殊 符号 、 个 性 化 字 词 等 没有 行业 通用 性 的 内 


虹 





4) 关键 词 内 容 示 例 必须 与 关键 词 对 应 匹配 。 


5) 关键 词 不 能 太 过 宽泛 ， 需 要 具有 限制 性 ， 例 如 : “内容 ”这 个 就 


(2) 违规 说 明 





除 不 能 违反 运营 规范 外 ， 还 不 能 违反 以 下 规则 ， 包 括 但 不 限于 : 


1) 不 允许 恶意 诱导 用 户 进 行 触 友 操作 ， 以 达到 可 向 用 户 下 发 模板 
目的 。 


2) 不 允许 恶意 骚扰 ， 下 发 对 用 户 造成 骚扰 的 模板 。 





3) 不 允许 恶意 营销 ， 下 发 营销 目的 模板 。 





4) 不 允许 通过 服务 号 下 发 模板 来 告知 用 户 在 小 程序 内 触发 的 服务 
相关 内 容 处 罚 说 明 。 


(3) 处 避 说 明 





根据 违规 情况 给 予 相应 梯度 的 处 加 ， 一 般 处 昼 规 则 如 下 : 





1) 第 一 次 违规 ， 删 除 违规 模板 以 示警 告 ， 


2) 第 二 次 违规 ， 封 茶 接 口 7 天 。 


3) 第 三 次 违规 ， 封 禁 接口 30 天 。 


4) 第 四 次 违规 ， 永 久 封禁 接口 。 


处 昼 结 果 及 原因 以 站 内 信 形 式 告知 。 


5.8.5 客服 消息 


在 小 程序 中 ， 通 过 点 击 <contact-button/> 可 以 进入 客服 会 话 系统 。 在 
会 话 系统 中 ， 用 户 发 送 的 信息 《或 进行 某 些 特定 的 用 户 操作 引发 的 事件 
推送 ) ， 微 信服 务 器 会 将 消息 《或 事件 ) 的 数据 包 以 POST 方式 传递 给 
开发 者 填写 的 URL。 当 开发 者 服务 器 接受 到 信息 后 ， 可 以 使 用 发 送 服务 
消息 接口 进行 异步 回复 ， 这 两 个 行为 分 别 是 2 个 不 同 的 请 求 。 基 于 这 个 
特性 ， 可 以 自己 研发 或 接 入 任何 客服 系统 。 





1 和 入 赴 蝇 
接 入 微 信 小 程序 消息 服务 ， 整 体 需要 2 步 : 
1) 填写 开发 者 服务 器 配置 。 


2) 开发 者 服务 器 接受 请 求 并 返回 指定 信息 ， 验 证 服务 器 地 址 有 效 


(1) 填写 服务 器 配置 


登录 微 信 公众 平台 ， 在 “设置 -> 消息 推送 ”中 局 动 消息 服务 ， 如 图 5- 
15 所 示 。 在 配置 页 面 填写 URL、Token 和 EncodingAESKey。 其 中 URL 是 
开发 者 服务 端 接收 消息 的 接口 URL 地 址 ， 必 须 是 http:// 或 https:// 开 头 ， 分 





别 支 持 80 和 443 端 口 。Token 为 用 户 喘 份 令 牌 用 作 生 成 签名 ， 可 由 开发 者 
任意 填写 ， 该 Token 会 和 接口 URL 中 包含 的 Token 进 行 对 比 ， 从 而 验证 安 
全 性 。EncodingAESKey 由 开发 者 手动 填写 或 随机 生成 ， 用 作 消 息 体 加 

解密 密 钥 。 在 配置 界面 中 可 以 选择 消息 加 密 方式 和 数据 格式 ， 加 密 方式 
默认 为 明文 ， 数 据 格式 默认 为 XML。 消 息 加 密 解 密 可 参考 


https://open.weixin.qq.com/cgi-bin/showdocument? 





action=dir_ list&t=resource/res_list&verify=1&id=openl1419318479&token=t 


填写 的 URL 需 要 正确 响应 微 信 发 送 的 Token 验 证 ， 乱 写 说 明 请 阅读 消息 推送 服务 器 配置 指南 


URL( 服 务 嚣 地 址 ) 


必须 以 httpx// 或 https:// 开 头 ， 分别 支持 80 庄 口 和 443 庙 口 


Token( 令 牌 ) 


必须 为 英文 或 数字 , 长 度 为 3-32 字 符 


EncodingAESKey 0/43 随机 生成 
( 消 意 加 客 客 钥 ) 


消息 加 密 客 钥 由 43 位 字符 组 成 ， 字 符 范围 为 A-Z,a-z,0-9 
消息 加 密 方式 请 根据 业务 需要 ,选择 消息 加 客 方式 ,启用 后 梅 立 即 生 效 
9 明文 模式 (不 使 用 消息 体 加 第 宅 功 能 ,安全 系数 较 低 ) 
兼容 模式 ” (明文 、 密 文 将 共存 ,方便 开发 者 调 涝 和 维护 ) 


， 安全 模式 ( 推荐) ”( 消 息 包 为 纯 客 文 ， 需 要 开发 者 加 密 和 和解 
密 ,安全 系数 高 ) 


请 选择 微 信和 与 开发 者 服务 露 间 传 输 的 数据 格式 
) JSON ® XML 


2 





图 5-15 ”配置 界面 


(2) 验证 服务 器 地 址 有 效 性 





仅仅 填写 配置 信息 是 不 能 完成 接 入 的 ， 提 交配 置信 息 后 ， 微 信服 务 
器 将 发 送 GET 请 求 到 填写 的 服务 器 地 址 ， 开 发 者 服务 器 收 到 请 求 并 按 要 
求 返回 才能 完成 接 入 ， 所 以 我 们 在 配置 前 先 完成 后 台 服 务 器 接口 工作 ， 
GET 请 求 参数 如 下 : 


"signatrue: 微 信 加 密 签名 ，signature 结 合 了 开发 者 填写 的 token 参 数 
和 请 求 中 的 timestamp 人 参数 、nonce 参 数 。 


:timestamp: 时 间 惟 。 
:nonce: 随机 数 。 
.echostr: 随机 字符 串 。 


后 台 可 通过 检验 signature 验 证 请 求 。 收 到 GET 请 求 后 ， 开 发 者 服务 
名 需要 原样 返回 echostr 参 数 内 容 ， 才 能 接 入 生效 。 加 密 / 校 验 流 程 如 下 : 


1) 将 token、timestamp、nonce 三 个 参数 进行 字典 序 排序 。 
2) 将 三 个 参数 字符 串 拼 接 成 一 个 字符 串 进行 shal 加 和 密 


3) 开发 者 获得 加 蜜 后 的 字符 串 可 与 signature 对 比 ， 标 识 该 请 求 来 源 
于 微 信 


检验 signature 的 PHP 代 码 示例 如 下 : 





private function checkSignature() 


$signature = $ GET["signature"]; 
$timestamp = $_GET["timestamp"]; 
$nonce = $_GET["nonce"]; 


$token = TOKEN; 

$tmpArr = array($token, $timestamp, $nonce); 
sort($tmpArr, SORT_STRING); 

$tmpStr = implode( $tmpArr ); 

$tmpStr = shai( $tmpStr ); 


if( $tmpStr == $signature ){ 
return true; 


}elsef{ 
return false; 





完成 URL 有 效 性 验证 后 便 接 入 生效 。 通 过 配置 URL 接 口 ， 开 发 者 服 
务 吉 可 接受 微 信 服务 器 推送 过 来 的 消 轧 和 事件 ， 并 根据 业务 进行 啊 应 。 





2. 接 受 消息 和 事件 





当 点 击 <contact-button/> 时 便 进 入 了 客服 会 话 状态 ， 在 会 话 状态 中 开 
发 者 服务 器 接收 信息 和 发 送信 息 是 2 个 不 同 接 口 。 当 用 户 在 客服 会 话 中 
发 送 消 息 《〈 或 进行 某 些 特定 的 用 户 操作 行为 引发 的 事件 ) ， 微 信服 务 器 
会 将 消息 (或 事件 ) 的 数据 包 (JSON 或 XML 格式 ) 以 POST 方式 发 送 到 
开发 者 填写 的 URL。 


接收 到 信息 后 开发 者 服务 器 必须 做 出 下 述 回复 ， 告 知 微 信 服务 器 我 
方 服 务 器 已 成 功 接 收 信息 : 


1) 直接 回复 success 〈 推 荐 方式 ) 。 


2) 直接 回复 空 串 《〈 指 字 节 长 度 为 0 的 空 字符 串 ， 而 不 是 结构 体 中 


content 字 段 的 内 容 为 空 ) 


微 信 服务 器 在 5 秒 内 收 不 到 任何 啊 应 会 断 反 连接 ， 并 重新 发 起 请 
求 ， 总 共 重 试 3 次 ， 如 果 在 调试 中 ， 发 现 用 户 无 法 收 到 啊 应 的 消 轧 ， 可 
以 检查 是 否 消息 处 理 超时 。 关 于 重 试 的 消息 排 重 ， 有 msgid 的 消息 推荐 











使 用 msgid 排 重 。 事 件 类 型 消息 推荐 使 用 FromUserName+CreateTime 排 
重 。 一 旦 过 到 以 下 情况 ， 微 信和 都 会 在 小 程序 会 话 中 ， 同 用 户 发 出 系统 提 
示 “ 访 小 程序 客服 暂时 无 法 提供 服务 ， 请 稍 后 再 试 ”: 





1) 开发 者 在 5 秒 内 未 回复 任何 内 容 。 





2) 开 友 者 回复 了 寞 第 数据 。 


如 果 和 希望 增加 消息 安全 性 ， 可 以 在 消 姑 配 置 中 开局 消息 加 密 功 能 ， 
用 户 发 给 小 程序 的 消 妃 以 及 小 程序 被 动 回复 用 户 消息 都 会 继续 加 密 。 接 
收 的 消息 按 类 型 可 划分 为 3 类 : 进入 会 话 事 件 、 文 本 消息 、 图 片 消息 。 























《15 进入 会 语 事件 


当 用 户 点 击 小 程序 “客服 会 话 按钮 * 进 入 客服 会 话 时 将 产生 如 下 数据 
包 : 


XML 格式 : 





<xml> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[event]]></MsgType> 
<Event><![CDATA[user_enter_tempsession]]></Event> 
<SessionFrom><![CDATA[sessionFrom]]></SessionFrom> 

</xml1> 





JSON 格 式 : 





"ToUserName": "toUser", 
"FromUserName": "fromUser", 
"CreateTime": 1482048670, 
"MsgType": "event", 

"Event": "user_enter_tempsession", 
"SessionFrom": "sessionFrom" 





字段 说 明 如 下 : 

"ToUserName: 小 程序 的 原始 ID。 

:FromUserName: 发 送 者 的 openid。 

-CreateTime: 事件 创建 时 间 〈 整 型 ) 。 

‘MsgType: event。 

:Event: 事件 类 型 ，user_enter_tempsession 。 

"SessionFrom: 开发 者 在 客服 会 话 按 钮 设置 的 sessionFrom 参 数 。 


(2) 文本 消息 





用 户 在 客服 会 话 中 发 送 文本 消息 时 将 产生 如 下 数据 包 : 


XML 格式 : 





<xml> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[text]]></MsgType> 
<Content><![CDATA[this is a test]]></Content> 
<MsgId>1234567890123456</MsgId> 

</xml> 





JSON 格 式 : 





"ToUserName": "toUser", 
"FromUserName": "fromUser", 
"CreateTime": 1482048670, 
"MsgType": "text", 
"Content": "this is a test", 
"MsgId": 1234567890123456 





字段 说 明 如 下 : 

“ToUserName: 小 程序 的 原始 ID。 

:FromUserName: 发 送 者 的 openid。 

-CreateTime: 消息 创建 时 间 〈 整 型 ) 。 

‘MsgType: text。 

-Content: 文本 消息 内 容 。 

.MsgId: 消息 id，64 位 整 型 。 

(3) 图片 消 乱 

用 户 在 客服 会 话 中 发 送 图 片 消 息 时 将 产生 如 下 数据 包 : 


XML 格式 : 





<xml> 
<ToUserName><![CDATA[toUser]]></ToUserName> 
<FromUserName><![CDATA[fromUser]]></FromUserName> 
<CreateTime>1482048670</CreateTime> 
<MsgType><![CDATA[image]]></MsgType> 
<PicUrl><![CDATA[this is a url]]></PicUrl> 
<MediaId><![CDATA[media id]]></MediaId> 
<MsgId>1234567890123456</MsgId> 








</xml> 
JSON 格 式 : 

{ 
"ToUserName": "toUser", 
"FromUserName": "fromUser", 


"CreateTime": 1482048670, 
"MsgType": "image", 
"PicUrl": "this is a url", 
"MediaId": "media_ id", 
"MsgId": 1234567890123456 





字段 说 明 如 下 : 

"ToUserName: 小 程序 的 原始 ID。 
:FromUserName: 发 送 者 的 openid。 
CreateTime: 消息 创建 时 间 〈 整 型 ) 。 
‘MsgType: text。 


:PicUrl: 图 片 链接 (由 系统 生成 )。 





“Mediald: 图 所 消息 媒体 id， 可 以 调用 获取 临时 系 材 接口 拉 取 数 
据 。 


.MsgId: 消息 id，64 位 整 型 
3. 发 送 消息 


开发 者 在 接收 到 微 信 服务 器 消息 后 ， 在 一 段 时 间 内 (目前 修改 为 48 
小 时 ) 可 以 调用 客服 接口 ， 通 过 POST 一 个 JSON 数 据 包 来 给 用 户 发 送 消 
息 。 此 接口 主要 用 户 客 服 等 有 人 工 消息 处 理 环节 ， 方 便 开 发 者 为 用 户 提 
供 更 优质 的 服务 。 





目前 允许 的 动作 列表 如 下 ， 不 同 动 作 触 发 后 ， 人 允许 的 客服 接口 下 发 
消息 条 数 和 下 发 时 限 不 同 。 下 发 条 数 达 到 上 限 后 ， 会 收 到 错误 返回 码 ， 
具体 请 见 返回 码 说 明 页 : 





用 户 动作 允许 下 发 条 数 限制 下 发 时 限 
用 户 通过 客服 消息 按钮 进入 会 话 1 分 名 
用 六 这 信和 ry 





发 送 消息 直接 通过 POST 方 式 调用 一 下 接口 即 可 : 


https://api.weixin.qq.com/cgi-bin/message/custom/send? 


access token=ACCESS _ TOKEN 
消息 JSON 数 据 格 式 如 下 : 


文本 消 轧 : 





{ 
"touser":"OPENID", 


"msgtype":"text", 


EX 


"content":"Hello World" 





图 片 消 县 : 





{ 
"touser":"OPENID", 
"msgtype":"image", 
"image": 


"media id":"MEDIA _ID" 





字段 说 明 如 下 : 

“access_token: 调用 接口 赁 证， 必 填 项 。 

:touser: 普通 用 户 openid， 必 填 项 。 

-msgtype: 消息 类 型 ， 文 本 为 text， 图 片 为 image， 必 填 项 。 
content: 文本 消息 内 容 ， 必 填 项 。 


-media_id: 发 送 的 图 片 的 媒体 ID， 通 过 新 增 素材 接口 上 传 图 片 文 件 
获得 ， 必 填 项 。 


请 求 接 口 后 微 信 服务 器 将 返回 调用 结果 ， 其 返回 错误 码 意义 如 下 : 


-1: 系统 繁 念 ， 此 时 请 开发 者 稍 候 再 试 。 


-0: 请 求 成 功 。 


.40001: 获取 access_token 时 AppSecret 错 误 ， 或 者 access_token 无 
效 。 请 开发 者 认真 比 对 AppSecret 的 正确 性 ， 或 查看 是 否 正在 为 恰当 的 
小 程序 调用 接口 。 


.40002: 不 合法 的 凭证 类 型 。 


.40003: 不 合法 的 OpenID， 请 开发 者 确认 OpenID 人 否 是 其 他 小 程序 


的 OpenID 。 
.45015: 回复 时 间 超 过 限制 。 
45047: 客服 接口 下 行 条 数 超过 上 限 。 
48001: API 功 能 未 授权 ， 请 确认 小 程序 已 获得 该 接口 。 
4. 临 时 素材 接口 


在 发 送 消息 时 ，media_id 需 要 填写 临时 素材 id。I 临 时 素材 需要 先 调 
用 新 增 临 时 素材 接口 上 传 至 微 信 服务 ， 在 通过 获取 接口 获取 对 应 资源 
id。 目 前 小 程序 只 文 持 下 载 图 片 文件 。 





(1) 新 增 临 时 素材 


通过 新 增 系 材 接口 可 以 把 本 地 媒体 文件 (目前 仅 支 持 图 片 》 上传 盏 





微 信 服务 器 ， 用 于 用 户 发 送 客服 消息 或 被 动 回 复 用 户 消 息 。 接 口 请 求 为 
POST/FORM， 调 用 接口 如 下 : 


https://api.weixin.qq.com/cgi-bin/media/upload? 


access_token=ACCESS_ TOKEN&type=TYPE 
参数 说 明 如 下 : 
“access_token: 调用 接口 赁 证， 必 填 项 。 
-type: image， 必 填 项 。 


-media: form-data 中 媒体 文件 标识 ， 有 filename、filelength、 


content-type 等 信息 。 


示例 代码 ， 利 用 curl 命 令 ， 用 FORM 表 单方 式 上 传 一 个 多 媒体 文 
人 





curl -F media=@test.jpg https://api.weixin.qq.com/cgi-bin/media/upload?access token: 





调用 后 正常 情况 会 返回 以 下 JSON 数 据 : 





{ 
"type" ' "TYPE", 
"media_id":"MEDIA_ ID", 
"created at":123456789 
} 





错误 情况 会 返回 以 下 JSON 数 据 : 


"errcode":40004, 
"errmsg":"invalid media type" 





返回 字段 如 下 : 


‘type: image。 


-media_ id: 媒体 上 传 后 ， 获 取 标 识 。 


:created_at: 媒体 文件 上 传 时 间 惟 。 


(2) 获取 临时 素材 





通过 调用 获取 临时 素材 接口 ， 可 以 获取 已 上 传 的 临时 文件 ， 目 前 小 
程序 仅 支 持 下 载 图 片 文件 。 接 口 请 求 为 POST/FORM， 调 用 接口 如 下 : 


https://api.weixin.qq.com/cgi-bin/media/get? 


access token=ACCESS_ TOKEN&media id=MEDIA_ID 


参数 说 明 如 下 : 


:access token: 调用 接口 凭证 。 


-media_id: 媒体 文件 ID。 


示例 代码 ， 利 用 cu 命令 获取 多 媒体 文件 : 





curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_ token=ACCESS TOKEN&me 





调用 成 功 后 ， 正 第 情况 将 返回 HTTP 头 如 下 : 





HTTP/1.1 200 OK 

Connection: close 

Content-Type: image/jpeg 

Content-disposition: attachment; filename="MEDIA ID.jpg" 
Date: Sun, 06 Jan 2013 10:20:18 GMT 

Cache-Control: no-cache, must-revalidate 

Content-Length: 339721 








如 琳 返 回 的 是 视频 素材 ， 内 容 如 下 : 





{ "video_url":DOWwN_URL} 








"errcode":40007, 
"errmsg":"invalid media _ id" 





小 程序 分 享 页 面 需要 在 Page 中 定义 onShareAppMessage 函 数 ， 设 置 
该 页 面 分 享 信息 。 只 有 定义 了 此 事件 函数 ， 右 上 角 才 会 显示 “分 享 " 按 

钮 。 用 户 点 击 分 享 按钮 时 会 触发 该 函数 ， 该 函数 返回 的 Object 对 象 将 用 
于 定义 分 享 内 容 ， 目 前 分 享 图 片 不 能 自 定义 ， 系 统 会 取 当 前 页 面 ， 从 顶 
部 开始 ， 高 度 为 80% 屏 幕 宽度 的 图 像 作 为 分 享 图 片 。 返 回 Object 属性 如 
下 ; 











:title: 分 享 标题 ， 默 认 值 为 当前 小 程序 名 称 。 
desc: 分 享 摘 述 ， 默 认 值 为 当前 小 程序 名 称 。 


小 


分 享 路 径 ， 必 须 是 以 /开头 且 在 app.json 中 已 注册 的 路 径 ， 默 
认为 当前 页 面 path。 


path: 


示例 代码 如 下 : 





Page({ 
onShareAppMessage: function () { 
return { 








title: ' 自 定义 分 享 标题 '， 

desc: ' 自 定义 分 享 描述 '， 

path: '/page/home?tab=cart' 
} 


} 
}) 














5.8.7 著 取 二 维 人 码 





小 程序 除了 分 享 当 前 页 面 也 可 以 通过 调用 后 台 接 口 生成 任意 页 面 对 
应 二 维 码 ， 扫 描 该 二 维 码 即 可 直接 进入 小 程序 对 应 页 面 。 通 过 该 接口 ， 
仅 能 生成 已 发 布 小 程序 的 二 维 码 。 在 开发 过 程 中 可 在 开发 者 工具 预览 时 
生成 开发 版 的 带 参 二 维 码 。 带 参 二 维 码 只 有 10000 个 ， 请 谨慎 使 用 。 接 
口 请 求 方式 为 POST， 接 口 地 址 如 下 : 


https://api.weixin.qq.com/cgi-bin/wxaapp/createwxagrcode? 


access token=ACCESS_ TOKEN 








接口 中 access_token 为 全 局 唯一 调用 凭据 ， 可 参考 模板 消息 调用 ， 
其 余 POST 参数 如 下 : 





path: 页 面 路 径 ， 不 能 为 空 ， 最 大 长 度 128 字 节 。 


-width: 二 维 码 的 宽度 ， 默 认 值 为 430。 


5.9 ”小 结 


本 章 主要 介绍 小 程序 API， 无 论 是 组 件 还 是 API， 大 家 都 可 以 当做 
字典 查询 ， 平 时 大 概 知道 它们 能 提供 的 能 力 、 边 界 ， 在 需要 用 到 的 时 候 
再 细致 研究 。 目 前 小 程序 组 件 和 API 都 在 不 断 丰 富 完 善 中 ， 平 时 多 关注 
官方 信息 。 在 接 下 来 章节 中 我 们 将 进入 实战 环节 。 











第 6 章 ” 守 例 分 析 一 一 忌 办 电影 





在 前 5 章 中 ， 我 们 学 习 了 小 程序 框架 、 组 件 、API 以 及 开发 相关 的 基 
础 知识 。 从 本 章 开 始 ， 我 们 将 进入 实战 环节 ， 开 发 小 型 App。 现 阶段 小 
程序 还 不 太 成熟 ， 在 不 同 手机 、 不 同 版 本 微 信 环境 下 存在 一 些 差异 ， 实 
战 实例 中 我 们 主要 讲解 项 目的 架构 思路 和 实现 过 程 ， 通 过 学 习 ， 再 看 官 
方 文档 会 变 得 非常 容易 。 通 过 实践 项 目的 学 习 ， 大 家 会 对 小 程序 研发 有 
更 深刻 的 认识 ， 为 了 便于 学 习 ， 实 战 项 目 中 均 未 使 用 ES6 新 特性 ， 本 章 
的 所 有 源码 可 在 https://github.com/wxapp-book/douban.git 下 载 。 











为 了 让 大 家 快速 了 解 开 发 流程 ， 我 们 选用 豆 激 电影 作为 第 一 个 实 
例 ， 在 这 个 实例 中 ， 我 们 主要 调用 豆 办 的 开放 API 接 口 ， 这 样 我 们 能 将 
更 多 精力 集中 到 小 程序 本 身 的 开发 上 。 豆 办 对 接口 作 了 权限 设置 ， 公 开 
的 数据 相对 较 少 ， 这 使 得 我 们 的 实践 项 目 只 有 两 个 页 面 。 电 影 列 表 页 和 
电影 详情 页 〈 如 图 6-1 所 示 ) ， 昌 然 项 目 小 、 代 码 量 不 大 ， 但 是 在 架构 
上 本 项 目 是 前 端 第 用 染 构 ， 基 于 这 套 代 码 架构 可 以 搭建 任意 复杂 的 项 
= 











6.1 准备 工作 


在 开始 代码 编写 前 ， 首 先 确认 服务 端 域名 已 添加 在 微 信 受 信任 链接 
中 ， 同 时 是 HTTPS 服 务 。 


6.1.1 豆 办 API 


现在 很 多 公司 都 有 自己 的 开放 平台 ， 比 如 淘宝 开放 和 平台、 腾讯 开发 
者 平台 、 高 德 API、 百 度 API 等 ， 它 们 都 提供 了 很 多 强大 的 平台 数据 服 
务 ， 利 用 这 些 服务 我 们 能 很 快 搭建 出 应 用 ， 提 高 开发 效率 、 节 省 服务 器 
资源 。 这 些 API 大 部 分 都 是 需要 申请 的 ， 豆 办 API 在 部 分 信息 上 也 作 了 
权限 限制 ， 我 们 能 调用 部 分 接口 和 接口 中 部 分 数据 。 本 实例 仅 用 到 豆 欠 
电影 API， 我 们 可 以 在 豆瓣 API 官 网 
(http://developers.douban.com/wiki/? title=api_v2 ) 上 看 到 所 有 API 信 
恩 ， 目 前 API 是 2.0 版 本 ， 提 供 的 服务 如 图 6-2 所 示 。 
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图 6-1 豆 准 电影 界面 


ApiV2 索引 


图 书 Api V2 
电影 Api V2 
音乐 Api V2 
同城 Api V2 
广播 Api V2 
用 户 Api V2 
日 记 Api V2 
相册 Api V2 
线 上 活动 Api V2 
论坛 Api V2 
回复 Api V2 


我 去 Api V2 





图 6-2” 豆 闪 API V2 


进入 电影 API， 我 们 主要 使 用 正在 热 映 、 即 将 上 映 、 电 影 条 目 信息 
这 3 个 API 接 口 : 


正在 热 映 


接口 地 址 :https://api.douban.com/v2/movie/in_theaters 





参数 city: 正在 热 映 列表 地 址 ， 可 以 传 中 文字 符 或 城市 编写， 如 “ 北 


京 ”"、“110000”， 默 认为 北京 。 
例 : https://api.douban.com/v2/movie/in_theaters? city= 北 京 
-即将 上 映 
接口 地 址 :https://api.douban.com/v2/movie/coming_soon 
参数 如 下 : 
start: 开始 的 节点 ， 默 认为 0。 
count: 请 求 返 回 列表 条 数 ， 默 认为 20。 
例 : https://api.douban.com/v2/movie/in_theaters? start=0&count=20 
:电影 条 目 信 息 


接口 地 址 : https://api.douban.com/Vv2/movie/subject/: id ， 这 个 接口 
没有 参数 


例 : https://api.douban.com/v2/movie/subject/1324043 


6.1.2” 跳 转 层 





由 于 豆 办 API 不 能 支持 非 浏 览 器 客户 端 发 起 的 请 求 ， 非 浏览 器 客户 
端 需要 下 载 对 应 的 SDK 来 请 求 API， 所 以 小 程序 在 微 信 中 打开 时 不 能 
接 调 用 豆 流 API 接 口 ， 所 以 我 们 利用 自己 的 服务 器 做 了 一 次 请 求 跳 转 

《如 图 6-3 所 示 ) ， 这 也 是 无 奈 之 举 : 








http://apl.douban.com/v2/movie/in theaters 


《全 https://Wwww.wxapp-gateway.com.movie.in theaters Ea 


BB 、 ED 
监 月 己 的 服务 需 eon 辟 泊 API 服务 器 


图 6-3 ”服务 器 请 求 流程 








豆 办 API 非 常规 范 ， 后 台 只 需要 做 简单 跳 转 便 可 以 实现 跳 转 ， 当 用 
户 请 求 https:/www.wxapp-gateway.com/movie/in_theaters 时 ， 我 们 后 台 服 
务 请 求 豆 准 对 应 的 API 地 址 : http://api.douban.com/v2/movie/in_theaters 
， 服 务 端 我 们 使 用 nodejs+express 实 现 后 台 ， 搭 建 nodejs 和 express 的 过 程 
我 们 不 再 袭 述 ， 大 家 可 以 参考 网 络 教程 ， 具 体 router 跳 转 代 码 如 下 : 





Var express = require('express'), 
router = express.Router(), 
http = require( 'http' )， 
_fn; 


/* GET users listing. */ 
router.get('/', function(req, res, next) { 
// 拦截 所 有 movie 子 域 下 的 请 求 ， 获 取 真 正 的 请 求 地 址 
var path = req.originalUrl.replace( '/movie/', '' ); 
_fn.getData( path, function( data ) { 
// 返回 从 豆瓣 请 求 的 数据 
res.send( data ); 
} ); 
}); 





上 





















































_fn={ 
getData : function( path, callback ) { 
// 向 豆 激发 起 请 求 
http.get( { 
hostname : "api,douban,com'， 
path : '/v2/movie/' + path 
}, function( res ) { 
var body = [1]; 
// 监听 chunk 包 
res.on( 'data', function( chunk ) { 
body.push( chunk ); 
} ); 
// 回调 函数 
res.on( 'end', function( ) { 
// 将 buffer 转 为 string, 并 回调 方法 
body = Buffer.concat( body ); 
callback( body,toString() ); 
} ); 
} ); 

















| 














} 
} 


module.exports = router; 


var movie = require('./routes/movie'); 
var app = express(); 

// 在 app .js 中 配置 路 
app.use('/movie/*', movie); 


























人 


6.2 ”技术 架构 


在 项 目 编码 之 前 ， 我 们 需要 先 思考 项 目的 架构 ， 保 证 项 目 具 备 一 定 
的 拓展 性 、 项 目 之 间 的 耦合 度 足 够 低 、 项 目的 代码 具备 复 用 的 能 力 ， 这 
样 才 能 提高 团队 的 编码 效率 。 借 用 服务 端 三 层 架 构 模 式 ， 一 个 项 目 可 分 
为 表现 层 、 业 务 逻 辑 层 、 数 据 访问 层 ， 前 端 项 目的 架构 如 图 6-4 所 示 。 








| 
lib 
| 
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有 





图 6-4” 豆 办 App 架 构 


"ib: 放置 一 些 最 底层 、 第 三 方 库 ， 如 jquery、seajs、qrcode、 





echarts 等 ， 通 销 lib 层 是 全 公司 共用 一 套 。 豆 办 电影 中 由 于 没有 第 三 方 库 
文件 ， 或 者 说 小 程序 框架 本 号 就 是 一 个 第 三 方 亩 ， 所 以 没有 ]ib 层 。 





:common: 放置 和 项 目 相 关 的 一 些 公 共 代 码 ， 如 转 码 、 工 具 包 、 公 
共 样 式 设 置 等 。 根 据 业 务 需要 可 以 将 widgets 和 common 合 并 为 一 个 目 
录 。 





service: 业务 逻辑 层 ， 按 业务 类 型 整合 相关 的 方法 ， 向 上 眶 圳 需要 
的 接口 方法 ， 比 如 a 页 面 需要 调用 登录 和 列表 信息 ，b 页 面 需 要 调用 登录 
和 详情 信息 ， 那 么 这 两 个 页 面 中 的 登录 接口 就 会 被 调用 两 次 ， 这 时 我 们 
便 可 以 将 这 种 和 业务 紧密 相关 的 接口 调用 方法 封装 起 来 ， 作 为 一 个 服务 
暴露 给 上 层 应 用 。 业 务 馆 辑 层 能 降低 表现 层 对 业务 的 关注 ， 让 更 多 精力 
关注 在 页 面 泻 染 、 页 面 交 互 等 功能 上 。 


-widgets: 一 些 通 用 的 带 UI 的 小 组 件 ， 如 pop、header、 购 物 车 图 标 
等 等 ， 它 和 common 层 有 些 类 似 ， 但 是 相对 common 层 ，widgets 有 具备 UI 界 
面 和 一 个 闭环 的 交互 功能 。 由 于 业务 问题 ， 在 豆 办 电影 实例 中 没有 
widgets 目 录 。 














-pages: 表现 层 ， 一 般 表 现 层 中 一 个 文件 夹 对 应 一 个 页 面 所 涉及 的 
所 有 资源 。 








这 种 分 层 方式 是 前 端 项 目 冲 见 的 以 构 分 层 方 式 ， 适 用 于 任何 原则 ， 
同时 按照 组 件 化 原则 我 们 通常 会 把 一 个 组 件 、 包 、 页 面 所 涉及 的 所 有 资 


源 放 置 在 一 个 目录 中 ， 如 图 6-5 所 示 。 


了 demo 
和 common 
vw basestyle 
Pp images 
basestyle,wxss 
Ww utils 
Utils,js 
WV pages 
Ww detail 
detail,js 
detailjson 
detail.wxml 
detail,Wwxss 
Vv home 


home,js 


home,json 


home.wxml 
home.wxss 
WV service 
Pp douban 
appjs 
appJson 
app.wWwxss 





图 6-5 ”目录 结构 


如 在 basestyle 中 ， 我 们 放置 了 wxss 和 相关 的 图 片 资源 ， 这 样 在 不 同 
项 目 开 发 中 需要 复 用 组 件 的 情况 下 ， 我 们 就 可 以 直接 将 目录 拷贝 过 去 ， 
而 不 用 在 不 同 目 录 中 查找 当前 组 件 相关 的 资源 。 我 们 平时 编码 过 程 中 ， 
尽量 把 相关 的 文件 放 到 一 个 目录 中 ， 通 常 目录 名 和 模块 入 口 名 一 致 。 
洲 电 影 相 关 目 录 如 下 : 








.basestlye: 一 些 项 目 公 共 的 基本 样式 ， 被 app.wxss 引 入 ， 当 前 项 目 
中 没有 公共 样式 ， 内 容 为 空 。 





-utils: 基础 工具 包 ， 项 目 中 我 们 把 系统 toast 进 行 了 一 层 人 代理， 封装 
到 对 应 方法 中 ， 如 果 以 后 需要 改变 toast 行 为 ， 我 们 便 可 以 直接 修改 代 
码 ， 而 不 用 在 每 个 调用 页 面 进行 修改 。 








detail: 详情 页 相关 资源 。 


:home: 首页 相关 资源 。 


douban: 请 求 豆 办 接口 的 相关 逻辑 代码 。 


6.3 ”公共 模块 开发 


按照 上 述 架 构 摘 述 ， 我 们 对 相关 的 模块 和 功能 进行 了 划分 ， 现 在 只 
需要 按照 规划 实现 代码 即 可 。 我 们 首先 讲述 service 和 utils 的 编写 。 在 
JavaScript 整 体 编码 中 一 般 handle 是 需要 对 外 骏 露 的 公共 方法 的 句柄 ， 写 
在 模块 前 面 ，_fn 是 私有 方法 ， 写 在 后 面 ， 这 样 便于 他 人 阅读 代码 ， 一 
打开 代码 便 看 见 当 前 模块 对 外 骏 露 的 方法 ， 然 后 层 层 往 下 阅读 ， 这 是 多 
年 形成 的 编程 习惯 ， 大 家 阅读 代码 时 可 以 留意 下 。 











6.3.1 业务 逻辑 层 


在 本 实例 中 我 们 将 豆 准 相关 业务 封装 到 douban.js 中 ， 虽 然 douban.js 
只 有 一 个 文件 ， 按 规则 我 们 仍然 将 它 放 在 一 个 douban 文 件 夹 中 ， 这 样 做 











的 原因 是 如 果 以 后 douban.js 内 容 过 多 或 需要 多 人 并 行 开 发 时 ， 我 们 可 以 
通过 模块 化 对 这 个 js 进行 拆 分 ，douban.js 代 码 见 代码 清单 6-1。 


代码 清单 6-1 douban.js 





var handle, 
URL, 
LISTTYPE, 
fn; 











movieList : 'https://www.wxapp-gateway.com/movie/', 


// 电影 详情 
movieDetail : 'https://www.wxapp-gateway.com/movie/subject'" 





























// 电影 类 型 


LISTTYPE = { 
// 正在 热 映 


























1 : "in theaters', 
// 即将 上 映 
2 : 'coming_soon' 


} 


// 暴露 出 去 的 服务 接口 
handle = { 
// 获取 列表 
getMovieList : function( type, callback ) { 
var url = URL.movieList + LISTTYPE[typel]; 
_fn.getData( { 
Url : Url 
}, callback ); 











了 
// 获取 详情 
getMovieDetail : function( id, callback ){ 
var Url = URL.movieDetail + '/' + id; 
_fn.getData( { 
Url : url 
}, callback ); 





_fn={ 
// 将 网 络 请 求 统一 放置 在 一 个 方法 中 
getData : function( param, callback ) { 
wx.request( { 
Url : param.url, 
method : 'get', 
data : { 
apikey : '00fa6c0654689a0202ef4412fd39ce06' 




















header: { 

'Content-Type': " application/Jjson' 
} 
Success : function( e ) { 

callback( e.data ); 


}, 
fail : function( e ) { 
callback( ); 
} ); 


module.exports = handle; 
[| 


6.3.2 ”公共 模块 


公共 模块 中 我 们 只 有 basestyle 和 utils 两 个 文件 夹 ，basesytle 是 公共 样 
式 ， 本 实例 没有 实现 ， 按 basestyle 思 路 我 们 可 以 创建 其 他 风格 样式 ， 在 
页 面 中 如 果 需 要 切换 时 直接 切换 class 属 性 名 便 可 以 统一 切换 风格 。 





utils 只 是 为 了 给 大 家 进行 演示 ， 仪 做 了 简单 封闭， 代码 如 下 : 





var handle; 


handle = { 
showLoading : function () { 
wx.showToast( { 
title : “数据 加 载 中 "， 
Icon : "loading '， 
duration : 10000 
) ; 





hideLoading : function() { 
wx.hideToast(); 





common 目 录 内 的 模块 并 没有 统一 的 拆 分 规则 ， 可 以 按 实 际 项 目 需 


要 进行 拆 分 3 


6.4 页 面 构建 





与 开发 前 站 项目 一 样 ， 我 们 移 编 写 页 面 构建 ， 再 编写 逻辑 代码 。 电 
影 票 业务 比较 简单 只 有 两 个 页 面 ， 即 首页 和 详情 页 。 





6.4.1 首页 


构建 首页 时 ， 我 们 使 用 了 一 个 fixed 布 局 的 头 ， 这 样 在 视觉 上 微 信 原 
生 的 头 部 变 高 了 ， 在 样式 效果 上 ， 基 本 没有 使 用 背景 图 片 ， 通 过 box- 
shadow、text-shadow 以 及 背景 渐变 实现 多 种 效果 。 列 表 布 局 上 主要 使 用 
了 Flex 布 局 ， 整 体 结构 如 图 6-6 所 示 。 


Flex 布局 的 tab 
fixed 布局 的 header 


Flex 布局 的 列表 


















图 6-6 首页 结构 图 


首页 布局 代码 如 代码 清单 6-2 和 代码 清单 6-3 所 示 。 


代码 清单 6-2 home.wxml 





<view class="header"> 
<view class="nav" bindtap="changeTab"> 


<view class="nav-wrapper"> 
<block wx:for="{{tabs.1list}}"> 


<view class="tab current" data-type="{{item,.type}}" data-index="{{index}}" wx: 


<view class="tab" data-type="{{item.type}}" data-index="{{index}}" wx:else>{{i 
</block> 


</view> 
</view> 
</view> 


<view class="]ist basestyle"> 
<block wx:for="{{movies.subjects}}"> 
<view class="item"> 
<navigator url="../detail/detail?id={{item.id}}"> 
<image mode="aspectFill" src="{{item.images.large}}"></image> 
<text>{{item.title}}</text> 
</navigator> 
</view> 
</block> 
</view> 





代码 清单 6-3 home.wxss 





/* 头 部 */ 

.header { position: fixed; top : 0; left : 0; padding : 10rpx 30rpx 15rpx 30rpx; 
width : 691irpx; background: -webkit-gradient(linear, 0 0, © 100%, 
from(#3f3f3f), to(#2f2f2f)); border-bottom : solid 1px #000; box-shadow: 
© 2px 4px #111; } 


.header .bar { height : 60rpx; font-size : 28rpx; background-color : #888; 
color : #fff; } 


/* 导航 */ 

‘hav { height : 60rpx; width : 100%; background-color: #373737; border : solid 
1px #000; border-radius: Spx; overflow: hidden; box-shadow : © -1px Opx 
#777; } 

‘hav .nav-wrapper { width : 693rpx; height : 100%; display : flex; position: 
relative; } 

.Nav .tab { color : #111; flex-grow : 1; font-size : 28rpx; border-right : solid 
1px #000; width : 50%; background: -webkit-gradient(linear, 0 0, © 100%, 
from(#636363), to(#4f4f4f)); text-align: center; line-height: 60rpx; } 

.nav .tab:first{ border-left : none; } 

.Nav .tab.current { color : #fcfcfc; font-weight : bold; background: 
-webkit-gradient(linear, 0 90, © 100%, from(#252525), to(#2f2f2f)); 
box-shadow: inset 0 © 4px #111; text-shadow : 0 2px 3px #000; } 


/* 列表 */ 

.list { display: flex; flex-wrap : wrap; padding : 90rpx © 30rpx 30rpx; 
background-color: #3f3f3f; } 

.list .item { font-size: 24rpx; text-align: center; width : 210rpx; margin-top : 
30rpx; margin-right : 30rpx; } 

.list .item image{ height : 325rpx; width : 100%; box-shadow: 3px 3px 4px #111; } 

.list .item text { width : 100%; height : 32rpx; margin-top : 10rpx; color : 
#fff; line-height: 32rpx; display: block;white-space:nowrap; 
overflow:hidden; text-overflow:ellipsis; } 





6.4.2 详情 页 


详情 页 整体 布局 比较 简单 ， 分 为 基本 人 信息、 简介、 主创 三 块 ， 在 视 
觉 上 我 们 使 用 阴影 让 模块 间 产 生 层 级 的 效果 ， 在 基本 信息 中 背景 使 用 了 
一 张 模糊 后 的 图 片 。 要 注意 的 是 如 果 页 面 高 度 不 够 页 面 背 景 默认 会 显示 
白色 ， 而 小 程序 没有 暴露 相关 接口 设置 页 面 背 景 颜色 ， 所 以 在 详情 页 中 
我 们 在 最 外 层 虚 套 了 一 个 view， 通 过 逻辑 层 计 算 的 高 度 ， 设 置 它 的 最 小 
高 度 ， 这 样 便 能 通过 设置 这 个 view 的 背景 色 达 到 修改 页 面 背景 色 的 效 
果 ， 整 体 布局 结构 如 图 6-7 所 示 。 




















| Post 图 片 


撒 部 放大 模糊 的 图 片 








人 
简介 


主创 列表 , scroview 


登 左 的 view 





图 6-7 详情 页 结构 图 


详情 页 布局 代码 如 代码 清单 6-4 和 代码 清单 6-5 所 示 。 


代码 清单 6-4 detail.wxml 





<view style="min-height : {{screen.minHeight}};background-color: #2f2f2f;"> 
<view class="banner"> 
<view class="poster"> 
<image mode="aspectFit" src="{{movie.images.large}}"></image> 
</view> 
<view class="info"> 
<view class="title">{{movie.title}}</view> 
<view>{{movie.aka[movie.aka.length - 1]}}</view> 
<view class="score">{{movie.rating.average}}<view> 分 </view></view> 
<view class="subinfo"> 
<view>{{movie.genresSstr}}</view> 
<view>{{movie.year}} 上 映 </view> 
</view> 
</view> 
<image class="background" mode="aspectFill" src="{{movie.images.1large}}"></image 
</view> 


<view class="summary"> 
{{movie.summary}} 
</view> 


<view class="casts"> 
<view class="title"> 主 创 </view> 
<scroll-view scroll-x> 
<view class="casts-wrapper" style="width:{{movie.staff.length*183}}rpx;"> 
<view class="avatar" wx:for="{{movie.staff}}"> 
<image mode="aspectFill" src="{{item.avatars.large}}"></image> 
<view>{{item.name}}</view> 
</view> 
</view> 
</scroll-view> 
</view> 
</view> 





代码 清单 6-5 detail.wxss 














/* 电影 简介 */ 

.banner { overflow: hidden; height : 535rpx; background-color: #fff; 
position:relative; box-shadow : 0 © 10px #111; border-bottom : solid 1pX 
#000; background-color: #222; 

.banner .background { width : 130%; height :130%; margin-left : -15%; margin-top: 
-15%; filter: blur(10px); opacity: 0.7; } 


/* 海报 */ 

,banner .poster { box-shadow: 3px 3px 5px #222; position: absolute; left : 30rpx; 
top : 40rpx; z-index : 1; width : 300rpx height : 435rpx; padding : 10Orpx; 
background-color: rgba(255,255,255,0.4); } 

.banner .poster image { width : 100%; height: 100%; } 


/* 相关 信息 */ 

.banner ,info { position: absolute; color : #fff; z-index : 2; width : 320rpx; 
left : 390rpx; top : 40rpx; font-size : 24rpx; } 

.banner .info .title { font-size : 46rpx; font-weight: bold; margin-bottom : 
10rpx; } 

.banner .info .Score { margin-top: 60rpx; font-size : 46rpx; color : #FFC125; } 

















,banner ,info .Score view{ font-size : 24rpx; display: inline; margin-left 
1orpx; } 
,banner .info .subinfo { margin-top : 20rpx; } 
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.Summary { font-size : 28rpx; line-height : 32rpx; padding : 20rpx 20rpx 40rpx 
20rpx; color : #fafafa; background-color: #222; } 


/* 演员 列表 */ 

.Casts { background-color: #2f2f2f; } 

.Casts .title { padding: 10rpx 20rpx; font-size : 34rpx; color : #fff; 
font-weight: bold; text-shadow : 0 2px 34px #000; background: 
-webkit-gradient(linear, 0 0, © 100%, from(#333), to(#2f2f2f)); box-shadow : 
© -1px 3px #111; border-top : solid 1px #444; } 

.Casts scroll-view { height : 31i0rpx; width : 730rpx; padding : © 10rpx; overflow: 
hidden; background-color: #2f2f2f,; } 

.Casts scroll-view ,avatar { display: block; float: left; padding : 10rpx 1i5rpx; 
width : 153rpx height : 222rpx; } 

.Casts scroll-view image { width : 153rpx; height : 222rpx; box-shadow: 3px 
3px 4px #111; } 

.Casts scroll-view .avatar view { text-align: center; width : 100%; font-size 
24rpx; line-height : 26rpx; overflow: hidden; height : 52rpx; margin-top : 
10rpx; color : #ccc; } 


RE 


6.5 ”页面 逻辑 开发 


在 小 程序 逻辑 开发 中 ， 数 据 模型 的 设计 特别 关键 ， 直 接 决 定 了 逻辑 
代码 和 布局 代码 的 复杂 度 ， 开 友之 前 一 定 要 多 人 花 时 间 整 理 数据 模型 。 








6.5.1 首页 





首页 中 数据 模型 主要 分 为 tb 和 movie， 在 tab 中 我 们 设置 了 一 个 当前 
选中 的 index 便 于 泻 染 和 修改 状态 ，movie 直 接 赋 值 豆 辨 返回 的 数据 ， 没 
有 进行 加 工 。 在 代码 设计 上 ， 我 们 认为 列表 的 演 染 永远 和 tab 相 关 ， 
入 首页 时 也 只 是 触发 选中 第 一 个 ttb， 这 种 设计 思路 将 大 大 减少 我 们 的 
代码 量 。 虽 然 我 们 可 以 通过 setData 方 法 触发 页 面 演 染 ， 但 我 们 仍然 暴露 
了 一 个 renderList 方 法 ， 这 是 因为 有 可 能 在 泻 染 页 面前 需要 对 返回 的 数据 
进行 加 工 ， 这 时 便 可 在 renderList 方 法 中 对 数据 进行 处 理 。 在 编写 代码 过 
程 中 ， 一 定 要 注意 代码 的 可 读 性 ， 尽 量 使 用 通俗 易 懂 的 编码 方式 。 应 与 
当前 逻辑 层面 不 相关 的 代码 都 封装 到 一 个 可 理解 的 方法 中 ， 这 样 才能 便 
于 多 人 维护 代码 ， 首 页 逻辑 代码 如 代码 清单 6-6 所 示 。 








代码 清单 6-6 home.js 





var service = require( '../../service/douban/douban' )， 
utils = require( '../../common/utils/utils' ), 
-fn 
Page( { 
data : { 
movies : {}, 
tabs : 
currentIindex : 0, 
list : [{ 








}, 
onReady : function() { 














// 进入 便 选 择 第 一 项 
_fn.selectTab.call(this, © ); 
} 
changeTab : function( e ) { 
var target = e.target,; 
// 选中 不 同 项 
_fn.selectTab.call( this, target.dataset.index ); 
} 
} ); 


_fn={ 
selectTab : function( index ) { 
var self = this, 
tabs = self.data.tabs; 
// 切换 状态 
self.setData( { 
'tabs.currentIndex' : index 
} ); 
utils. showLoading( ); 
// 获取 数据 
service.getMovieList( tabs,Jist[index],.type，Tfunction( data ) { 
utils.hideLoading(); 
// 演 染 页 下 
_fn.renderList.call( self, data ); 
} ); 


也 
renderList : function( data ) { 
data = data || listData; 
// 可 能 会 对 数据 进行 处 理 
this.setData( { 
movies : data 


} ); 
} 















































6.5.2 “详情 页 


详情 页 十 分 简单 ， 仅 仅 是 获取 后 台数 据 后 进行 展示 ， 其 代码 如 代码 
清单 6-7 所 示 。 


代码 清单 6-7 detail.js 





var service = require( '../../service/douban/douban' )， 
utils = require( '../../common/utils/utils' ), 
_fn; 

Page( { 
data : { 


movie : {}, 
Screen : { 
minHeight : "auto' 


人 
onLoad : function( query ) { 
Var self = this; 
utils. showLoading( ); 
// 设置 页 面 高 度 ， 避 免 底 部 出 现 白色 区 域 。 
wx.getSystemInfo( { 
success : function( info ) { 
self.setData( { 





'screen.minHeight' : info.windowHeight + 'px' 
} ); 
}) 
// 获取 数据 
service.getMovieDetail( query.id, function( data ) { 
data = data || movieDetail,; 


console.log( data ); 
utils.hideLoading(); 
_fn.render.call( self, data ); 


} ); 
} 
} ); 
_fn={ 


render : function( data ) { 
// 设置 描述 
data.genresstr = data.genres.join( '/' ); 
// 把 演员 和 导演 都 罗列 出 来 
data.staff = data.directors.concat( data.casts ); 
this.setData( { 
movie : data 


} ); 























6.6 小结 


豆 流 电 影 实例 整体 业务 逻辑 不 复 人 条， 整体 实现 非常 简单 ， 基 于 这 个 
简单 项 目的 代码 架构 ， 可 以 快速 搭建 出 任何 项 目 。 


第 7 草 ” 采 例 分 析 一 一 区 考 








目前 市 面 上 有 很 多 与 机 动车 驾驶 人 培训 考试 〈 以 下 简称 轨 考 ) 有 关 
的 App， 这 些 App 提 供 了 丰富 的 与 驾 考 相关 的 服务 ， 在 市 场 上 得 到 了 广 
泛 认可 。 本 章 会 使 用 微 信 小 程序 制作 一 球 类 似 的 App。 项 目的 源码 地 址 
为 : https://github.com/wxapp-book/jiakao.git 。 


目前 ， 驾 考分 为 四 个 阶段 ， 分 别 为 科目 一 : 理论 考试 科目 二 : 场 
地 技能 考试 ， 科 目 三 : 道路 技巧 考试 科目 四 : 安全 文明 驾驶 考试 。 其 
中 科目 一 与 科目 四 为 理论 上 机 科目 ， 科 目 二 与 科目 三 为 实践 性 科目 。 本 
章 练 习 项 目的 重点 是 开发 科目 一 和 科目 四 的 试题 练习 ， 通 过 完成 < 顺序 
练习 ”“ 模 拟 考试 “成 绩 统 计 ”“ 错 题 本 ”等 功能 ， 使 读者 对 小 程序 开 
发 有 更 清晰 的 思路 。 








7.1 业务 流程 


开发 小 程序 之 前 我 们 先 对 业务 梳理 并 划分 到 不 同 的 页 面 当 中 。 这 样 
保证 不 会 有 业务 被 遗漏 ， 也 有 助 于 在 开发 阶段 对 相似 的 业务 进行 抽象 ， 
保证 代码 有 较 低 的 元 余 度 ， 节 约 开 发 成 本 。 


在 本 章 练 习 3App 中 ， 将 业务 分 为 四 个 部 分 : 首页 ， 文 科 考 试 学 习 
《科目 一 、 科 目 四 ) ， 视 频 教学 〈 科 目 二 、 三 学 习 ) ， 系 统管 理 ， 下 面 
将 对 各 个 部 分 的 功能 进行 定义 。 


1. 首 页 : App 的 主 界面 ， 提 供 科目 一 、 科 目 二 、 科 目 三 、 科 目 四 、 
系统 管理 这 些 功能 的 入 口 。 


科目 一 与 科目 四 的 内 容 包括 三 种 答题 模式 ， 分 别 为 : 顺序 学 习 、 模 
拟 考试 、 错 题 本 。 夯 外 ， 还 要 提供 用 户 手 动 更 新 题库 的 功能 。 科 目 二 与 
科目 三 需要 使 用 一 个 类 似 轮 播 图 的 组 件 将 学 习 视 频 展 示 在 页 面 上 。 系 统 
管理 作为 一 个 单独 的 链接 放 在 页 面 上 。 除 此 之 外 ， 页 面 还 将 展示 一 些 统 
计数 据 ， 如 展示 科目 一 与 科目 四 的 答题 正确 率 和 学 习 的 完成 进度 等 ， 这 
样 可 以 提醒 用 户 学 习 的 成 果 。 





2. 文 科 考 试 学 习 ， 主 要 提供 两 个 页 面 : 





1) 习题 页 面 : 用 户 的 做 题 页 面 ， 该 页 面 会 被 科目 一 和 科目 四 的 三 


种 模式 重用 ， 分 别 为 : 模拟 考试 、 顺 序 学 习 、 错 题 本 。 以 下 是 这 三 种 模 
式 的 功能 点 : 


顺序 学 习 : 顺序 学 习 功 能 会 根据 用 户 的 考试 科目 (科目 一 、 科 目 
四 ) 和 车 型 (A1、A2、B1、B2、C1、C2) 获取 [匹配 的 完整 题库 ， 然 后 
将 这 些 题 库 中 的 习题 顺序 展示 给 用 户 学 习 。 在 用 户 学 习 的 过 程 中 ， 完 成 
每 道 题 后 ， 系 统 会 直接 对 用 户 的 答案 是 否 正 确 给 出 结果 。 如 果 正 确 ， 自 
动 切换 至 下 一 题 ， 人 否则 ， 标 记 正 确 答 案 并 给 出 答案 解释 ， 然 后 将 该 题 加 
入 一 个 针对 考试 科目 和 车 型 的 全 局 错 题 本 ， 用 户 可 以 手动 切换 下 一 题 ， 
继续 答题 。 同 时 系统 会 记录 用 户 的 完成 进度 ， 以 供 下 次 学 习 时 ， 可 以 继 
续 未 完成 的 练习 。 














模拟 考试 :模拟 考试 根据 用 户 的 考试 科目 和 车 型 ， 从 相关 题库 
中 ， 随 机 抽 选 正式 考试 要 求 数目 的 考题 ， 作 为 用 户 的 练习 题 。 与 顺序 学 
习 的 共同 点 是 : 在 做 题 过 程 中 ， 会 实时 判断 用 户 的 作答 是 否 正确 ， 并 将 
错 题 加 入 全 局 错 题 本 。 不 同 点 是 : 模拟 考试 不 会 影响 顺序 学 习 的 进度 ， 
除了 会 将 错 题 加 入 全 局 错 题 本 外 ， 还 会 将 其 加 入 一 个 只 与 本 次 考试 有 关 
的 错 题 本 ， 以 供用 户 在 完成 本 次 模拟 考试 后 可 以 及 时 复习 。 











错 题 本 : 错 题 本 有 两 种 ， 一 种 是 全 局 错 题 本 。 它 会 把 用 户 使 用 顺 
序 学 习 功 能 时 ， 做 的 错 题 展示 给 用 户 ， 这 种 错 题 本 用 户 可 以 随时 奉 看 。 
另 一 种 错 题 本 是 针对 考试 的 错 题 本 ， 这 种 错 题 本 的 进入 链接 只 会 在 每 次 
模拟 考试 结束 后 的 “考试 结果 ”页 提供 ， 并 且 只 会 展示 本 次 考试 产生 的 错 








题 。 用 户 在 完成 错 题 本 的 题目 后 ， 同 样 会 即时 给 出 答案 是 否 正确 的 判 
断 ， 如 果 正 确 ， 则 将 该 错 题 移 除 全 局 错 题 本 。 


2) 练习 结果 页 面 : 练习 结果 页 有 两 种 状态 。 第 一 种 作为 模拟 考试 
结果 页 ， 会 在 每 次 模拟 考试 结束 后 显示 ， 主 要 的 显示 内 容 有 本 次 考试 的 
得 分 ， 成 绩 是 否 合格 〈 科 目 一 与 科目 四 合格 均 为 90 分 ) ， 本 次 考试 错 题 
本 的 链接 等 。 第 二 种 是 用 户 完 成 了 茶 个 考试 科目 和 车 型 对 应 的 “顺序 学 
习 ” 后 ， 看 到 的 结果 页 。 这 个 结果 页 会 提供 全 局 错 题 本 的 进入 链接 和 整 
体 的 正确 率 。 








3. 科 目 二 ， 科 目 三 : 这 两 块 的 业务 相对 简单 ， 这 里 仅 提 供 一 些 教学 
视频 供 在 线 观 看 。 

4. 系 统管 理 : 系统 管理 大 部 分 的 功能 是 与 storage 相 关 的 ， 包 括 清除 
storage， 以 及 同 storage 中 保存 考试 车 型 等 ， 这 部 分 比较 简单 ， 所 以 不 会 
作为 讲解 重点 。 


7.2 ”项目 染 构 


7.2.1 功能 后 分 析 


在 本 项 目 中 ， 科 目 一 考试 与 科目 四 考试 属于 理论 性 考试 ， 用 户 都 需 
要 一 个 答题 页 ， 这 个 答题 页 在 两 个 考试 科目 中 的 功能 点 、 用 户 交 互 ， 以 
及 业务 方面 几乎 完全 相同 ， 所 以 在 设计 页 面 的 时 候 ， 可 以 考虑 将 其 合 3 
为 一 个 页 面 ， 在 开发 的 过 程 中 尽量 将 差异 性 的 东西 隔离 开 来 ， 保 证 这 个 
页 面 可 以 满足 不 同 科目 和 不 同学 习 模式 的 演 染 需求 。 











数据 方面 ， 一 共 调 用 了 两 个 HTTP 接 口 ， 这 两 个 接口 一 个 是 根据 考 
试 科目 、 考 试车 型 、 学 习 类 型 (顺序 学 习 、 随 机 考试 ) 获取 考题 的 接口 
(以 下 简称 考题 接口 )， 男 外 一 个 是 获取 考试 答案 的 映射 的 接口 (以 下 
简称 答案 映射 接口 ) 。 由 于 要 考 文 科 考 试 包含 单 选 题 与 多 选 题 ， 所 以 可 
能 的 答案 组 合 有 17 种 ， 考 题 接口 返回 的 考题 答案 只 是 一 个 代码 ， 这 个 代 
码 代 表 了 这 17 种 组 合 的 一 种 ， 所 以 需要 一 种 映射 机 制 去 获取 正确 答案 。 
这 个 接口 就 是 这 个 映射 的 依据 。 


存储 管理 ， 系 统 中 的 一 些 常 用 的 数据 如 用 户 的 考试 车 型 ， 一些 需要 
请 求 ， 但 是 变化 频率 又 不 高 的 数据 ， 都 可 以 存储 在 微 信 小 程序 的 storage 
中 ， 这 些 数据 的 storage key 值 需要 作为 常量 来 管理 。 


考试 页 面 是 一 个 单 页 面 系统 。 用 户 在 答题 的 时 候 ， 系 统 会 根据 用 户 
的 点 击 〈 如 用 户 点 击 上 一 题 或 下 一 题 ) ， 以 及 答题 正确 后 系统 自动 切换 
题目 的 方式 ， 切 换 不 同 题目 的 “页 面 "。 笔 者 在 最 初 实现 这 个 功能 的 时 
候 ， 使 用 了 小 程序 的 swiper 组 件 ， 因 为 swiper 目 带 了 左右 滑动 功能 ， 可 
以 节省 页 面 切 换 的 代码 ， 但 是 ， 当 用 swiper 去 泻 染 “ 顺 序 学 习 ” 的 页 面 
时 ， 题 目 会 超过 1000 道 ， 一 次 泻 染 节点 数量 也 非常 多 ， 导 致 页 面 的 性 能 
很 低 ， 以 至 于 无 法 正常 调试 。 于 是 考虑 将 题目 分 批 次 泻 染 ， 即 每 次 演 染 
10 道 题 ， 当 用 户 越过 每 批 次 的 第 1 题 或 者 第 10 题 时 ， 通 过 swiper 的 
bindchange 事 件 触发 向 前 泻 染 10 道 题 或 者 向 后 泻 染 10 道 题 ， 但 是 却 发 现 
swiper 组 件 在 配置 autoplay 为 false 的 情况 下 ， 当 到 头 或 者 到 尾 的 时 候 不 会 
触发 bingchang 事 件 ， 进 过 反复 尝试 ， 最 后 放弃 这 个 实现 方案 ， 改 用 了 男 
外 一 种 通用 的 单 页 面 的 解决 方案 ， 这 个 也 是 本 项 目的 难点 之 一 。 























数据 统计 ， 用 户 在 学 习 或 者 考试 完成 后 ， 需 要 对 考试 和 学 习 的 正确 
率 进行 统计 和 展示 ， 这 要 求 系 统 在 答题 过 程 中 ， 将 答题 的 正确 与 售 随时 
记录 并 且 组 成 一 个 集合 ， 在 答题 完成 后 ， 对 这 个 集合 的 正确 和 错误 的 答 
题 进行 统计 。 





7.2.2 项目 结构 图 


图 7-1 是 项 目 结构 图 ， 下 边 将 介绍 各 个 部 分 所 承担 的 功能 。 


v CS driving-license-exam 
Vv CS common 
Tj 
因 constantjs 
queue,js 
因 wxjs 
vw Cy wss 
main,wxs5 
Vv CS component 
question,wxmil 
国 scroll.wxml 
Tlib 
时 underscore,js 
了 CG pages 
» OD finish 
> home 
> 六 system 
» OO test 
» OO video 
v LS service 
加 answer-service,js 


加 exam-service,js 


时 question-service.js 
» utils 
四 appjs 
四 appjson 
因 app.wxss 


图 7-1 项 目 结构 图 





common: 存放 一 些 公 共 业 务 相 关 的 代码 。 


1) wx.js 与 constatn.js 是 主要 的 两 个 文件 。wx.js 的 主要 功能 是 封装 一 
些微 信 小 程序 的 底层 API。 在 开发 过 程 中 ， 有 一 些 底 层 的 微 信 小 程序 
API 是 需要 我 们 根据 上 自身 业务 进行 进一步 封装 的 ， 例 如 wx.request 这 个 方 
法 ， 我 们 在 请 求 数 据 的 时 候 ， 需 要 携带 到 合 数据 《聚合 数据 会 在 7.2.3 节 
介绍 ) 的 AppKey 作 为 一 个 参数 ， 但 是 在 多 人 合作 开发 的 情况 下 ， 业 务 
开发 者 不 需要 关心 这 个 参数 ， 所 以 ， 为 了 减少 开发 时 间 ， 类 似 这 样 的 功 
能 可 以 作为 一 个 公共 的 服务 提供 出 来 。 





2) constant.js 的 主要 功能 是 保存 系统 的 常量 ， 例 如 一 些 常用 的 
storage key、 数 据 接口 的 URL 等 。 


component: 存放 的 是 一 些 公 用 的 小 程序 模板 (template〉。 


lib: 存放 第 三 方 的 类 库 。 这 里 介绍 下 underscore.js。 微 信 小 程序 的 
开发 是 基于 数据 模型 的 ， 所 以 ， 会 有 大 量 的 数据 操作 ， 比 如 列表 得 询 、 
数据 格式 转换 等 工作 。 在 这 里 选择 underscore.js 作 为 数据 处 理 的 工具 ， 
它 有 很 多 优势 ， 如 十 分 小 巧 ， 压 缩 后 只 有 4KB;， 使 用 方法 简单 ， 它 提供 
了 几 十 种 函数 式 编 程 的 方法 ， 大 大 方便 了 JavaScript 的 编程 ， 履 兰 面 三 ， 
包含 了 操作 集合 、 数 组 、 函 数 和 对 象 的 方法 ; 社区 人 气 高 ， 不 用 担心 技 
术 文 持 的 问题 。 


pages: 存放 页 面 代码 。 


1) finish: 科目 一 和 科目 四 练习 结束 的 页 面 。 
2) home: 首页 。 

3) system: 系统 配置 页 面 。 

4) test: 科目 一 和 科目 四 的 考题 学 习 页 。 
5) video: 科目 二 和 科目 三 播放 视频 的 页 面 。 
service: 存放 公用 服务 代码 。 


1) exam-service.js: 考题 接口 每 次 请 求 的 数据 量 都 比较 大 ， 但 是 考 
题 数 据 的 变化 频率 却 不 高 ， 所 以 如 果 是 请 求 顺 序 学 习 的 数据 《全 量 题 
库 ) ， 可 以 将 数据 存储 到 微 信 小 程序 的 storage 中 ， 这 样 可 以 减少 用 户 流 
量 的 开销 ， 也 可 以 大 大 减少 读 取 数 据 的 等 每 时 间 。 因 此 ， 可 以 抽象 出 一 
个 服务 层 专门 提供 操作 题库 的 功能 ， 如 获取 题库 数据 ， 将 题库 数据 从 
storage 读 取 / 写 入 等 功能 以 供 统计 缓存 管理 等 功能 使 用 。 





2) answer-service.js: 答案 映射 接口 与 考题 接口 也 比较 相似 ， 变 化 
频率 也 不 是 很 高 ， 但 是 返回 的 数据 不 方便 操作 〈 见 图 7-4) ， 需 要 将 其 
转化 为 可 操作 的 数据 格式 。 所 以 ， 针 对 这 个 接口 ， 也 可 以 提 烁 一 个 服 
务 。 这 个 服务 包含 的 功能 有 : 获取 答案 映射 数据 ， 将 答题 映射 从 storage 


读 取 / 写 入 等 功能 。 














3) question-service.js: 系统 在 泻 染 考题 和 判断 用 户 作 答 是 否 正 确 的 
时 候 ， 会 用 到 一 些 重用 率 很 高 的 功能 ， 比 如 判断 当前 考题 是 单 选 题 还 是 
多 选 题 的 方法 ， 还 有 对 比 用 户 答案 与 正确 答案 的 方法 等 ， 这 些 与 操作 考 
题 操作 有 关 的 方法 ， 统 一 由 这 个 服务 来 提供 。 


7.2.3 ”数据 接口 


本 章 一 共 调用 了 两 个 数据 接口 ， 分 别 为 考题 接口 和 答案 映射 接口 ， 
这 两 个 接口 的 数据 提供 者 并 非 作者 本 人 ， 而 是 调用 了 第 三 方 数据 供应 两 
聚合 数据 的 API。 

聚合 数据 是 国内 领先 的 基础 数据 服务 丙 ，B2D 开 发 者 服务 的 先行 


者 。 平 台 是 以 目 有 数据 为 基础 ， 各 种 便捷 服务 整合 以 及 第 三 方 数 据 接 
入 ， 为 互联 网 开发 全 行业 提供 标准 化 API 技 术 文 撑 服 务 的 DaaS 平 台 。 


亲 , 请 登录 。 免费 注册 
营销 方案 ”聚合 代码 新闻 动态 


影视 娱乐 
。 生 活 /天 气 /健康 时 RUAP 夫 信 。 旦 峻 运势 ”可 本 书 “电影 要 房 


学 用 快递 全国 天 气 预报 影视 各 故地 址 解析 “周公 解梦。 影视 S 讯 榨 衬 


电视 节目 时 间 表 QQS 玛 测 古 的 。 者 苗 押 $s Pa 4 rT 
* 车 辆 /出 行 参 4 D4 
全 国 车 辆 尝 便 全国 公交 及 路 径 规 划 吉 询 体育 赛事 p39 Pa Mn [9 


人 本 A NBA 夺 事 球 员 信 息 大 全 ”足球 赛事 球员 信息 大 全 
金融 基金 训 


a we ee E 当 
货币 汇 恋 银行 卡 三 元 素 检 省 CBA 于 也 疼 事 传 息 。 内 边 体 育 馆 二 淘 NI 足球 免 费 股 < 有 P | 
A 全 
。 通讯 /位 置 问答 知识 立即 申请 
过 信和 Ap 服务 ”移动 联通 基站 
鬼 马 问答 ”作文 大 全 问 短 机 酉 人 数字 阅读 信 自 
。 充值 /礼品 卡 新 华宇 归 ”成 酒 词 星 


活 项 充值 ”京东 E 卡 


。 娱乐 /体育 /问答 


笑话 大 全 ”NBA 赛事 


招 招募 聚合 供应 商 
。 开 发 工具 “也 / 活 各 、 汶 量 等 优质 资源 
同 答 机 疾 人 AlexaR 汪 摸 名 





图 7-2 ”聚合 数据 首页 


聚合 数据 的 官网 是 https:/www.juhe.cn/ ， 首 页 如 图 7-2 所 示 ， 开 发 者 
可 以 从 中 获取 各 种 实用 的 数据 接口 ， 比 如 IP 查 询 、 万 年 历 等 。 这 些 接口 
有 免费 接口 也 有 付费 接口 。 同 时 聚合 数据 会 不 定期 地 组 织 一 些 活 动 ， 比 
如 本 和 草 使 用 的 这 两 个 接口 就 是 在 活动 期 间 被 聚合 数据 免费 开放 出 来 的 。 








本 章 调 用 的 两 个 接口 都 需要 传递 由 聚合 数据 分 配给 开 有 友 者 的 


Appkey。 获 取 Appkey 需 要 注册 聚合 数据 的 会 员 以 及 通过 审核 ， 由 于 篇 
幅 的 关系 就 不 详细 描述 这 个 过 程 了 。 读 者 在 得 到 Appkey 之 后 ， 需 要 按照 
官网 接口 文档 的 要 求 将 Appkey 加 入 请 求 中 ， 才 能 获取 到 正确 的 数据 。 


图 7-3 与 图 7-4 分 别 为 试题 接口 与 答案 映射 接口 的 数据 返回 样 例 ， 读 
者 可 以 先 对 这 两 个 接口 的 数据 格式 做 个 简单 了 解 。 下 一 节 将 详细 介绍 轰 
考 App 的 代码 逻辑 和 实现 细节 。 


fi 
NA 
"error_ code": 0， 


"reason": "Ok", 
"result": [ 
{ 
"id": 12, 
"question": "这 个 标志 是 何 合 /问题 
"ansWer" "4",/ / 舍 菏 
"item1": "前 7 碱 速 ",// 选项 ， 当 内 容 为 空 时 表示 判断 题 正确 选项 


"item2": "最 低 时 速 40 公 \ 里 ",/ /选项 ， 当 内 容 为 空 时 表示 判断 题 错误 选项 
"item3": "PR 市 /40l 电 轴 重 "， 


"item4": "限制 最 高 时 速 40 公 里 "， 、 , 时 
bor mr "限制 最 高 时 速 40 公 里 : 表示 该 标志 至 前 方 限制 速 席 标 志 的 路 段 内 ， 机 动车 行 怠速 度 不 得 超过 标志 所 示 雪 


"http:/ /images.juheapi.com /jztk/cic2subject1/12.jpg"/ /图 片 ur 





图 7-3 ”试题 接口 返回 数据 


"eTTOT Code": o, 
TeasS0n : SUCOESS ， 
"Tesult": 
1! : "一 薄 者 丰 硼 "， 
": "了 或 者 错误 "”， 
四 和 
rDn， 
a ‘AB", 


: "AC™, 
. "AD", 


: "BE", 

- "BD", 

i. GE 

- "ABC", 

, "ABD", 
。 "ACD", 

。 "BCD", 

: IAABCD， 





图 7-4 答案 映射 接口 返回 数据 


7.3 ”代码 分 析 


7.3.1 小 程序 后 层 代 码 封装 


小 程序 提供 了 一 个 wx.request 方 法 ， 开 发 者 通过 它 ， 以 发 送 HTTPS 
请 求 的 方式 获取 外 部 数据 。 但 是 它 限制 了 并 发 数 为 5 个 ， 超 出 后 将 会 报 
普 并 且 阻 止 超出 的 请 求 发 送 。 代 码 清单 7-1 对 该 方法 进行 了 封装 ， 
的 是 : 第 一 将 聚合 数据 的 Appkey 封 装 在 其 中 ;第 二 通过 调用 
wx.ShowToast 方 法 ， 保 证 在 请 求 过 程 中 阻塞 用 户 的 操作 ;第 三 确保 如 果 
并 发 量 高 于 5 个 的 时 候 ， 不 会 有 请 求 被 阻止 或 者 失败 。 





代码 清单 7-1 wx.request() 封装 














callNum : 9, // 全 局 变量 ， 表 示 当 前 队列 中 的 异步 请 求 数量 ， 不 得 超过 5 个 
dueryJH : function(args)t{ 
wx.showToast({ 
title: "数据 加 载 中 "， 
icon:"loading", 
duration: 10000 











/ 


var ajaxQueue = queue.getQueue("wxAjaxQueue");// 初 始 化 请 求 队列 
var fire = function(){// 在 每 次 请 求 结束 后 被 调用 
if(handle.callNum<5&&ajaxQueue.callbackArray.1length>0){ 
ajaxQueue.fire();// 触 发 队列 中 下 个 ajax 请 求 
handle.callNum = handle.callNum+1; 
} 
var query = function( ){// 请 求 方法 体 
var AppKey = constant.AppkKey; 
var url = args.url; 
var data = args.datal | 人 {}; 
var complete = args.complete,; 
var fail = args.fail; 
data.key = AppKey; /7 集合 当 据 的 Appkey 























wx.request({ 
url : Url， 


data: data, 
complete:function(resp)t 
fire( ); 
if(typeof complete === "function")t{ 
complete(resp); 


} 
If(ajaxQueue ,getSize()<=0){ 
wx.hideToast(); 


} 
handle.callNum--; 


} 
2}); 


if(ajaxQueue && ajaxQueue.callbackArray.length>=0){// 程 序 入 口 ， 


ajaxQueue.add(args, query);// 在 队列 中 将 请 求 的 方法 体 和 请 求 参 注册 ， 并 等 待 调用 
fire( ); 


} 
}, 



































代码 清单 7-2 是 代码 清单 7-1 中 gueue 对 象 的 源码 ， 它 是 确保 并 发 超过 
5 个 时 ， 没 有 请 求 被 阻止 的 关键 。 这 个 对 象 的 功能 类 似 Jquery 的 callback 
对 象 。 它 通过 原型 链 对 外 提供 了 两 个 方法 ， 一 个 是 queue.add () ， 这 个 
方法 是 用 来 将 请 求 的 参数 与 回调 函数 保存 到 一 个 队列 中 。 另 外 一 个 方法 
是 queue.fire 〈) ， 这 个 方法 取出 队列 中 的 第 一 个 方法 和 参数 ， 执 行 并 将 
其 


其 移 除 。 


代码 清单 7-2 queue.js 





人 
*common/js/queue.js 


* 队列 对 象 
*/ 


var us = require('../../lib/underscore.js'); 

var queue = function(name){// 构 造 方法 
this.name = name; 
this.callbackArray = []; 





}; 
queue.prototype = {// 原 型 方法 
getName:function(){ 
return this.name; 





}, 
add:function(){ 
this.callbackArray.push({ 
callback:us.1last(arguments),// 传 递 时 ， 最 后 一 个 参数 为 函数 调用 体 
args:arguments// 函 数 传 入 参数 


x 























}, 


fire:function(){// 
var fire0bj = this.callbackArray.shift();// 获 取 当 前 队列 中 的 第 一 个 对 象 
fire0bj.callback(fire0bj.args);// 执 行 





}, 


getSize:function(){ 
return this.callbackArray.length; 
}, 


}; 


Var queues = { 
wxAjaxQueue:new queue("wxAjaxQueue") 


var handle = { 
getQueue:function(name)t 


If(dqueues[name] ){ 
return queues[name]; 
} 


} 


# 
module.exports = handle; 首 页 





Ce | 


732 首页 


图 7-5 为 首页 的 效果 图 。 首 页 的 主要 功能 是 提供 各 种 获 考 科目 的 学 
习 的 入 口 以 及 系统 配置 入 口 。 上 文 已 经 介绍 过 ， 科 目 一 与 科目 四 的 考题 
练习 页 的 业务 与 用 户 交 互 十 分 相似 ， 所 以 使 用 了 相同 的 页 面 ， 通 过 给 该 
页 面 传递 不 同 考试 科目 、 考 试车 型 还 有 学 习 类 型 ， 来 加 载 不 同 的 数据 。 











代码 清单 7-3 是 首页 跳 转 科目 一 科目 四 的 学 习 页 的 泻 染 代码 ， 由 于 
代码 相似 ， 所 以 只 展示 了 科目 一 的 代码 。 顺 序 学 习 、 模 拟 考 试 、 错 题 本 
都 是 通过 goTest 方 法 完成 的 ， 而 且 它 们 的 节点 上 都 有 属性 data-testType 和 
data-subject。data-testType 用 来 保存 学 习 类 型 ，data-subject 用 来 保存 考试 
科目 。 当 用 户 点 击 这 些 链接 后 ， 后 台 会 将 这 两 个 参数 传递 到 
pages/test/test 页 面 。 不 过 在 点 击 “ 错 题 本 ”时 除了 这 两 个 参数 以 外 ， 还 会 
把 storage 中 的 错 题 记录 读 取 出 来 传递 。 











WeChat 


一 -一 


首页 

科目 1 完成 情况 1. 0% 正确 率 30. 3% 
顺序 字 习 模拟 考试 
错 题 本 更 新 题库 


科目 2 


科目 4 完成 情况 0. 4% 正确 车 80. 0% 
顺序 学习 模拟 考试 
错 题 本 更 新 题库 





图 7-5 ”首页 


代码 清单 7-3 ”科目 一 科目 四 演 染 逻辑 





<view class="subject subject1 ei1"> 
<view class="l0ogo-subject"></view> 
<view class="subject-title ei"> 
科目 4 
<block wx:if="{{eiRecord}}"> 
<view class="recordMsg"> 完 成 情况 {{elRecord.complete}} 正确 率 {{elRecord.correct}} 
</block> 
</view> 
<view class="selection"> 
<view bindtap="goTest" data-testType="order" data-subject="1" class="e_ selectior 
<view class="inner"><view class="10g0"></view> 
顺序 学 习 
</view> 
</view> 
<view bindtap="goTest" data-testType="rand" data-subject="1" class="e_ selection 
<view class="inner"><view class="10g0"></view> 
模拟 考试 
</view> 
</view> 
<view bindtap="goTest" data-testType="error" data-subject="1" class="e_ selectior 
<view class="inner"><view class="10g0"></view> 
错 题 本 
</view> 
</view> 
<view bindtap="updateExam" data-subject="1" class="e_ selection s4"> 
<view class="inner"><view class="10g0"></view> 
更 新 题库 
</view> 
</view> 
</view> 
</view> 


























| 


7.3.3 ”答题 页 

图 7-6 为 考试 页 面 的 效果 图 ， 从 图 中 我 们 可 以 看 到 该 页 面 的 包含 的 
数据 有 考题 、 考 试 科 目 、 考 试车 型 、 考 试 类 型 、 当 前 的 完成 进度 等 。 
包含 的 操作 有 : 选择 答案 、 答 题 、 翻 页 、 结 束 考试 等 。 这 个 页 面 的 数据 
模型 为 图 7-7， 从 这 张 图 中 我 们 可 以 找到 大 部 分 页 面 所 需 的 数据 ， 下 边 
对 一 些 特殊 的 字段 做 一 些 解释 。 


WeChat 


cl 科目 1 顺序 学 习 


1. 这 个 标志 是 何 含义 ? 
A. 小 型 车 车 道 

B. 小 型 车 专用 车 道 

C. 多 乘员 车 辆 专用 车 道 
D. 机 动车 车 道 


1/1229 





图 7-6 “答题 页 


了 Object fttitLe: "", _ webviewId : 8, testModeLl: "ci1”, testSubject: "1"”，testTJype: "MW".} 回 
_ webviewId : 9 
current: 18 

Pb examDataIndex: Array[166] 
pagel: Object 
name: “page1” 
pageData: null 
vpageInfo: Object 
isCurrent: "backup” 
isShow: "hide” 
> proto_ _: Object 
> proto _: Object 
了 page2: Object 
name: “page2” 
Pb pageData: Object 
pageInfo: Object 
isCurrent: "current" 
isShow: "show” 
> _proto__: Object 
Pp_proto_: Object 
Pp randRecord: Object 
testModel: "ci”" 
testSubject: "1" 
testType:“" 随 机 测 式 " 
testTypeOrg: "rand” 
Ee 
total: 100 





图 7-7 答题 页 数据 模型 


examDataIndex: 本 次 学 习 所 需要 的 全 量 考题 数据 。 比 如 用 户 选 择 
了 C1 车 型 科目 一 的 顺序 学 习 ， 这 个 字段 里 边 就 存储 科目 1 车 型 C1 的 全 量 
题库 。 如 果 用 户 选 择 了 随机 考试 ， 系 统 会 调用 考题 接口 ， 获 取 科 目 一 车 
型 C1 题库 中 的 随机 100 道 题 保 存在 这 个 字段 中 。 如 果 用 户 选 择 了 错 题 
本 ， 则 考题 是 通过 参数 传递 的 ， 这 个 参数 是 一 个 由 考题 Id4 (考题 接口 返 
回 的 每 个 考题 都 有 一 个 Id) 组 成 的 数组 。 得 到 这 个 Id 数组 后 ， 将 其 映射 
成 为 考题 数组 并 保存 在 其 中 。 


pagel/page2: 存储 当前 页 面 的 考题 数据 ， 这 两 个 字段 会 交 蔡 保存 该 
数据 ， 即 当 一 个 作为 存储 字段 时 ， 另 外 一 个 会 被 置 空 。 这 样 设计 的 原因 
是 答题 页 是 一 个 单 页 面 ， 所 有 的 题目 必须 在 同一 个 页 面 展 示 ， 但 是 不 能 
一 次 渔 染 完 ， 因 为 节点 过 多 性 能 很 差 ， 因 此 一 次 只 会 泻 染 一 道 题 ， 而 且 
还 要 考虑 页 面 切换 的 效果 。 上 所 以 在 开发 泻 染 方法 时 ， 设 计 了 两 个 演 染 


view， 这 两 个 view 会 交替 展示 考题 。 








代码 清单 7-4 是 答题 页 演 染 的 主要 代码 ， 两 个 泻 染 的 view (data- 
block-name="1" 与 data-block-name="2") 分 别 由 pagel 字 段 和 page2 字 段 泻 
染 。 这 段 代 码 只 是 泻 染 逻辑 的 框架 ， 考 题 的 数据 是 
由 ./component/question-template.wxml 的 模板 生成 ， 这 个 模板 的 泻 染 只 需 
要 把 examDataIndex 列 表 中 的 考题 数据 传 入 即 可 。 这 段 代码 需要 关注 的 
是 泻 染 view 的 两 个 动态 class， 分 别 由 pageInfo.isCurrent 和 pageInfo.isShow 
的 值 来 展示 。pagelInfo.isCurrent 是 用 来 表示 这 个 view 是 否 为 当前 用 户 正 
在 操作 的 界面 ， 可 能 的 值 有 current、backup， 这 个 class 并 不 会 控制 页 面 
的 样式 变化 ， 只 是 用 来 标识 该 view 是 否 作为 展示 view。pageInfo.isShow 
是 用 来 控制 页 面 的 显示 和 隐藏 的 ， 可 能 的 值 有 show、hide， 这 个 class 不 


会 影响 业 逻 辑 。 





代码 清单 7-4 test.wxml 





<view class="dle-body"> 
<view class="test"> 
<view data-block-name="1" class="{{pagel1.pageIinfo.isCurrent}} 
{{pagel1.pageInfo.isShow}} page"> 
<template is="question-template" data="{{...page1}}"/> 


</view> 
<view data-block-name="2" class="{{page2.pageInfo.isCurrent}} 
{{page2.pageInfo.isShow}} page"> 
<template is="question-template" data="{{...page2}}"/> 
</view> 
</view> 
</view> 














代码 清单 7-5 是 用 来 获取 答题 页 显示 层 和 隐藏 层 数据 的 方法 ， 在 开 
发 中 经 常会 遇 到 需要 知道 哪个 view 是 显示 view 的 场景 ， 如 切 题 时 判断 哪 
个 页 面 应 该 被 隐藏 ， 哪 个 应 该 被 泻 染 。 页 面 的 变化 就 是 数据 模型 的 变 
化 ， 所 以 在 设计 数据 模型 时 要 考虑 到 数据 可 以 描述 页 面 的 所 有 变化 ， 在 
设计 界面 的 时 候 ， 需 要 履 新 这 个 数据 模型 的 所 有 变化 ， 而 不 是 像 开 发 
H5 时 ， 通 过 JS 去 改变 DOM。 











代码 清单 7-5 ”获取 页 面 显示 层 和 隐藏 层 的 数据 





getPageData:function(){ 
var pagel1 = us.last(getCurrentPages()).data.pagel; 
var page2 = us.last(getcurrentPages()).data.page2;// 得 到 演 染 的 两 个 数据 对 象 
var showPage={},hidePpage={}; 
if(pagel1.pageInfo.isCurrent==="current"){//pageli1 为 显示 数据 
ShowPage = 
name:"pagel1", 
data:pagel1 














hidepage = { 
name:"page2", 
data:page2 





Fk 
}else if(page2.pageInfo.isCurrent==="current"){//page2 为 显示 数据 
showPage = { 
name:"page2", 
data:page2 


hidePage = { 
name:"pagel1", 
data:pagel1 
} ee ss 
return {// 调 用 者 可 以 通过 这 个 方法 获取 当前 显示 层 和 隐藏 层 的 数据 
showPage: showPpage, 
hidePage:hidePage 
}; 























代码 清单 7-6 是 用 来 根据 页 码 值 获取 考题 的 代码 。 由 于 系统 一 次 只 
会 演 染 一 道 题 在 页 面 上 ， 所 以 会 经 常 有 题目 查询 的 需求 。 不 论 用 户 选 择 
的 答题 模式 是 顺序 学 习 、 模 拟 考 试 还 是 错 题 本 ， 保 存在 exmDataIndex 字 
段 中 的 考题 列表 的 数据 格式 是 相同 ， 页 码 的 值 本 质 就 是 当前 考题 在 考题 
列表 中 的 编号 ， 所 以 本 方法 就 是 从 这 个 数组 中 根据 编号 ， 获 取 考 题 数 
据 。 





























代码 清单 7-6 ”根据 页 面 标 号 获取 考题 





getQuestionByPageNum:function(nextPageNum){ 
var examData = _fn.getExamIndex(),;// 从 数据 模型 中 得 到 演 染 题 列 表 
if(nextPageNum-1>=0 && nextPageNum-1<=examData.JIength ){ 
var question = examData[nextPageNum-1]; 
question.index = nextPageNum; 
return { 
question:question, 
total:examData.1length, 
current:nextPageNum 





}; 
}elsef{ 
return false; 


}, 





下 边 将 介绍 考题 泻 染 的 业务 逻辑 ， 图 7-8 是 渔 染 的 数据 ， 其 中 大 部 
分 为 考题 数据 ， 还 有 一 些 数据 是 在 用 户 的 操作 过 程 中 产生 的 。 


“answer: 本 题 的 答案 编号， 系统 会 用 这 个 编写 与 答 采 映 冉 接口 返回 
的 数据 做 匹配 ， 从 中 找到 该 题 对 应 的 答案 选项 ， 图 7-8 中 表明 该 题 的 答 


案 为 D。 


correctAnswerMap: 答案 的 数据 化 ， 这 个 数据 最 终 会 泻 染 到 相应 的 





答案 上 ， 用 作 高 党 正确 答案 和 标记 用 户 是 否 答题 正确 。 





judgRes: 答题 是 否 正 确 的 判断 。 


:lockQuestion: 用 户 对 该 题 的 操作 锁 ， 在 用 户 提交 答案 后 ， 这 个 值 
就 会 变 为 tue， 表 示 用 户 不 可 再 管 题 。 


showExplains: 是 否 显 示 正 确 答案 以 及 解释 ， 在 用 户 答 题 错误 后 ， 


这 个 值 会 变 为 true。 


userSelect: 用 户 的 选项 数据 化 ， 这 个 数据 最 终 会 泻 染 到 相应 的 答 
案 上 ， 用 作 高 亮 用 户 当前 的 选择 。 





代码 清单 7-7 是 考题 泻 染 的 逻辑 。 考 题 页 面 可 以 分 为 三 个 状态 ， 分 
别 为 页 面 初始 化 、 用 户 选 中 答案 、 用 户 提 交 答 案 三 个 阶段 。 初 始 化 状态 
就 是 用 户 在 页 面 上 未 做 任何 操作 ， 只 展示 考题 和 考题 选项 ， 此 时 的 演 染 
数据 只 有 题目 和 答案 选项 。 考 题 泻 染 完 成 后 ， 用 户 可 以 点 击 选 项 使 页 面 
发 生变 化 ， 此 时 的 演 染 数据 添加 了 userSelect 对 象 。 此 处 需要 注意 ， 虽 然 
小 程序 模板 的 泻 染 数 据 需 要 父 页 面 传 入 ， 但 事件 是 可 以 与 父 页 面 共用 一 
个 page 对 象 的 。 第 三 个 状态 在 用 户 确 定 答案 后 才 会 触发 。 此 时 会 生成 
correctAnswerMap、judgRes、lockQuestion、showExplains 对 象 对 页 面 进 




















a 
加 | 


JZ 二 vy 
行 泻 染 。 


理 pagel: Object 
name: "paEe1” 
下 pageData: Object 
answWer: "4" 
¥ correctAnswertMap: Object 
iteml: "in-correct"™ 
item2: "in-correct”™ 
item3: "in-correct”™ 
item4: "correct”™ 
bproto _ : Object 
explains:“" 此 为 机 动车 车 道 ， 比 儿 乘 员 车 辆 专用 车 道 少 俩 .人 .。" 
id: 1 
index: 1 
让 em1:“ 路 型 车 车 道 " 
让 em2:“ 路 型 车 专用 丰 道 " 
让 em3 :“ 夺 乘员 车 辆 专用 车 道 " 
让 em4: “机 动车 车 道 " 
judgeRes: false 
lockQuestion: true 
question:“" 这 个 标志 是 何 售 光 ?了 " 
showExplains: true 
url: "http://images.juheapi.com/jztk/clc2subject1/1.jpe”™ 
¥ Userselect: Object 
iteml: "selected"™ 
Eb proto : Object 
kb proto : Object 





图 7-8 ”页面 泻 染 数据 


代码 清单 7-7 ”考题 泻 染 





<template name="question-template"> 
<view class="question-view"> 
<block wx:if="{{pageData.url}}"> 
片 





<view><!-- 演 染 考题 图 片 - -> 
<image class="picture" src="{{pageData.url}}" ></image> 
</view> 

</block> 


<block wx:if="{{pageData.id}}"><!-- 演 染 考 题 文 案 - -> 
<view class="question">{{pageData.index}}. {{pageData.question}}</view> 
</block> 
<View class="answers"><!-- 演 染 答案 - -> 
<block wx:if="{{pageData.item1}}"><!-- 选 项 有 三 种 状态 未 选中 ， 已 选中 ， 判 断后 - -> 




















<view class="item-1" data-value="1" data-item-id="{{pageData.id}}" bindte 
</block> 
<block wx:if="{{pageData.item2}}"> 
<view class="item-2" data-value="2" data-item-id="{{pageData.id}}" bindte 
</block> 
<block wx:if="{{pageData.item3}}"> 
<view class="item-3" data-value="3" data-item-id="{{pageData.id}}" bindte 
</block> 
<block wx:if="{{pageData.item4}}"> 
<view class="item-4" data-value="4" data-item-id="{{pageData.id}}" bindt 
</block> 
</view> 
<block wx:if="{{pageData.id}}"><!-- 提 交 答 案 按 钮 - -> 
<view class="do-answer" data-item-id="{{pageData.id}}" bindtap="doAnswer "> 确定 
</block> 
<block wx:if="{{pageData.showExplains===true}}"><!- -答案 解释 ， 用 户 未 提交 答案 ， 或 者 
<view class="correct-answer"> 
<view class="answer -msg"><!- -答案 选项 - -> 
正确 答案 : 
<block wx:if="{{pageData.answer===1}}"> 
A.{{pageData.item1}} 
</block> 
<block wx:elif="{{pageData.answer===2}}"> 
B.{{pageData.item2}} 
</block> 
<block wx:elif="{{pageData.answer===3}}"> 
c.{{pageData.item3}} 
</block> 
<block wx:else="{{pageData.answer===4}}"> 
D.{{pageData.item4}} 
</block> 
</view> 
<view class="answer-explain"><1!-- 解 释 - -> 
答案 释义 : 
{{pageData.explains}} 
</view> 
</view> 
</block> 
</view> 
</template> 
































代码 清单 7-8 用 来 高 亮 用 户 选 择 的 选项 ， 也 就 是 上 文 说 的 userSelect 
字段 的 生成 方式 。userSelect 对 象 的 key 值 的 可 选 值 为 item1、item2、 
item3、item4， 分 别 对 应 了 页 面 上 的 A、B、C、D 选 项 ， 用 户 每 次 选择 
选项 后 ， 都 会 刷新 这 个 对 象 。 注 意 ， 这 里 需要 考虑 考题 为 多 选 题 的 情 
况 。 标 记 后 ， 用 户 选 择 的 选项 的 key 值 为 selected， 未 选择 的 选项 不 会 存 
入 该 对 象 。 在 这 个 数据 创建 完成 后 ， 会 调用 
render.renderCurrentPage〈) 来 刷新 这 个 页 面 。 刷 新 后 ， 被 选中 的 考题 





选项 会 多 出 一 个 值 为 selected 的 dass。 本 页 面 的 wxss 会 对 这 个 class 进 行 高 
亮 的 样式 处 理 。 





代码 清单 7-8 高 亮 选 中 选项 





hightLightItem:function(questionId,selectValue){ 
var curQuestion = test.getcurrentQuestion().question;// 得 到 当前 显示 的 考题 
var isLock = curQuestion.,lockQuestion;// 锁 住 回答 
if(isLock)t{ 
return; 





var questionType = questionService.getQuestionType(curQuestion.answer ) ， 

// 计 算 该 题 是 单 选 还 是 多 选 

var userSelect = curQuestion.userSelect | |{}; 

if(questionType===1){// 如 果 是 单 选 ， 则 清空 已 经 选 的 选项 
userSelect = {}; 











userSelect["item"+selectValue] = 
userSelect["item"+selectValuel]?false:'selected',; 
curQuestion.userSelect = userSelect;// 构 建 uUserSelect 对 象 
render .renderCurrentPage(); 


}, 








代码 清单 7-9 是 用 来 判断 当前 用 户 的 答题 结果 是 否 正确 的 代码 。 开 
始 时 系统 会 获取 userSelect 字 段 标记 的 选项 。 之 后 遍历 这 个 对 象 中 的 所 有 
key， 将 key 转 换 成 一 个 数字 ，item1 为 1，item2 为 2，item3 为 3，item4 为 
4， 然 后 将 这 些 数字 拼 为 一 个 字符 串 〈 注 意 多 选 题 的 情况 ) ， 与 answer 
字段 对 应 的 答案 映射 接口 处 理 后 的 答案 字符 串 《〈 见 图 7-9) 进行 匹配 ， 
如 果 匹 配 成 功 ， 则 判断 当前 答题 正确 。 如 图 7-8 数 据 的 answer 字 段 为 4， 
对 应 答案 映射 接口 的 数据 为 4， 表 示 选 项 D 为 正确 。 判 断 完 成 后 ， 会 返 
回 一 个 与 userSelect 相 似 的 对 象 ， 不 同 的 是 ， 会 将 所 有 选项 的 判断 结果 标 
记 出 来 。 数 据 创 建 完 成 后 ， 会 调用 renderrenderCurrentPage〈) 方法 刷 


新 答案 选项 的 dlass， 正 确 答案 的 class 是 correct， 错 误 为 in-correct。 然 后 





本 页 面 的 wxss 会 对 有 correct 和 in-correct 的 class 节 点 做 相应 的 样式 处 理 。 


代码 清单 7-9 判断 答案 是 售 正 确 





judge:function(questionId){ 
var curQuestion = test.getCurrentQuestion().question; 


var userSelect = curQuestion.userSelect || 人 全， 

var itemiStatus = userSelect.item1==='selected'?"1":"",) 
Var item2Status = userSelect.item2==='selected'?"2":"",; 
Var item3Status = userSelect.item3==='selected'?"3":"",， 
Var item4Status = userSelect.item4==='selected'?"4":""， 

















// 将 用 户 选择 的 选项 转换 为 答案 映射 接口 处 理 后 的 字符 串 
var userAnswerStr = itemiStatus+item2Status+item3Status+item4Status,; 
var correctAnswer = questionService.getQuestionAnswer (curQuestion),; 
// 获 取 数 据 映射 接口 处 理 后 的 答案 数据 
curQuestion.correctAnswerMap = correctAnswer ,answer0bj 
var judgeRes = false; 
// 如 果 相 同 则 表示 正确 ， 否 则 为 错误 
If(userAnswerStr===correctAnswer ,answerStr){ 

judgeRes = true,; 





























curQuestion.judgeRes = judgeRes ; 

record.doRecord({ 
questionId:questionId, 
judgeRes:judgeRes 

}); 

return judgeRes; 


}, 
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图 7-9 处理 后 的 答案 映射 





代码 清单 7-10 是 用 来 刷新 考题 页 数据 的 代码 ， 这 个 方法 会 在 上 文 讲 
到 的 用 户 选 择 答案 以 及 确定 答案 后 被 调用 。 


代码 清单 7-10 ”刷新 当前 页 面 数据 





renderCurrentPage:function( ){ 
var curQuestion0bj = test.getcurrentQuestion();// 获 取 当 前 的 考题 
var curQuestion = curQuestion0bj.question;// 获 取 新 的 泻 染 数据 
if(!curQuestion){ 
return false; 





var pages = _fn.getPpageData( ); 

var showPage = pages.showPage;// 获 取 显 示 页 的 数据 
var ShowPageName = ShowPage.name 

var ShowPageData = ShowPage .data; 











showPageData.pageData = curQuestion;// 更 新 泻 染 页 的 数据 





newRenderData = {}; 
newRenderData[showPpageName]=showPageData; 
newRenderData.total = curQuestion0bj .total;// 更 新 页 码 数据 
newRenderData,current = CurQuestiono0bj.current 
getCurrentPages()[0].setData(newRenderData) ;// 演 染 
return true; 


}, 














代码 清单 7-11 是 用 来 处 理 用 户 点 击 下 一 页 的 代码 ， 因 为 在 页 面 切换 
的 时 候 会 留 有 0.5 秒 的 延迟 ， 在 这 0.5 秒 期 间 ， 是 不 允许 用 户 继续 做 翻 页 
操作 的 。 所 以 使 用 变量 pageLock 来 锁 住 翻 页 操作 。 这 个 锁 会 在 翻 页 完成 
后 解 开 。 之 后 的 render.renderNextPage () 方法 用 来 将 数据 刷 入 考题 隐 
藏 页 。 但 是 这 个 方法 并 没有 做 页 面 效 果 的 切换 ， 只 返回 了 一 个 执行 结 
果 ， 如 果 为 true 时 ， 会 执行 render.exchangeShowHide () 方法 ， 这 个 方 
法 就 是 执行 页 面 切换 转换 ， 显 示 隐 藏 考题 页 状态 的 方法 ， 将 pageLock 设 
为 false 也 是 在 这 个 方法 中 执行 的 。 








代码 清单 7-11 翻 页 代码 





goNext :function(){ 
If(pageLock){ 
return; 


pageLock = true; 
if(render.renderNextPage())t{ 
render .exchangeShowHide( ); 
} 
}, 


二 一 


目的 下 一 道 题 ， 





代码 清单 7-12 是 用 来 处 理 切换 考题 的 代码 。 该 方法 首先 获取 当前 题 


然后 将 考题 传递 给 render.exchangePageContent〈) 方 


> 


法 。 这 个 方法 的 主要 逻辑 是 将 传 入 的 考题 数据 ， 泻 染 到 当前 隐藏 考题 页 
青空 


中 ， 将 显示 考题 页 数据 ; 





本 人。 


代码 清单 7-12 切换 考题 


renderNextPage:function(){ 
// 从 examDataIndex 中 获取 当前 题目 的 下 一 道 题 


}, 


var nextQuestionobj 
// 将 这 道 题 演 染 在 页 面 上 









































test.getNextQuestion(); 


return render.exchangePageContent(nextQuestion0bj); 


exchangePageContent:function(question){ 
var newQuestionobj = question; 
var newQuestion = newQuestionO0bj.question,; 


}, 


If(!newQuestion){ 


return false; 





} 
// 获 取 显 示 页 和 隐藏 页 的 数 ] 


Var 
Var 
Var 
Var 
Var 
Var 
Var 


If(!SshowPageData ， 


// 页 面 初始 化 第 


中 


口 





pages = _fn,.getPageData( ); 
ShowPage = pages.showpage; 
hidePage = pages.hidePage; 
ShowPage .name 
showPage.data; 
hidePage.name; 
hidePage.data; 


ShowPageName 
ShowPageData 
hidePageName 
hidePageData 


pageData){ 








图 





次 被 调 




















] ， 两 个 层 都 没有 被 泻 染 ， 就 选 当前 的 显示 层 











showPageData.pageData = newQuestion,; 
hidePageData.pageData = null; 
}elsef{ 


// 


newRenderData = {}; 





第 一 次 之 后 的 泻 染 ， 就 选择 当前 的 泻 染 层 泻 染 
hidePageData.pageData 
showPageData.pageData 


NewQuestion; 
null; 


newRenderData[showPageName]=showPageData,; 
newRenderData[hidePpageName]=hidePageData; 
newRenderData,total = newQuestionObj.total; 


newRenderData.current 


= NewQuestionObj.current; 


getCurrentPages()[0].setData(newRenderData); 
return true; 








代码 清单 7-13 是 用 来 实现 翻 页 效果 的 代码 ， 基 本 原理 就 是 将 两 个 


page 对 象 的 pageInfo( 如 图 7-10 所 示 〉 的 值 互 换 。 这 里 使 用 了 500 喀 秒 的 
延迟 是 因为 该 方法 在 管 题 正确 后 会 被 重用 ，500 坚 秒 会 给 用 户 一 小 段 时 


间 看 到 自己 的 答题 结果 为 正确 。 


代码 清单 7-13” 翻 页 效果 





exchangeShowHide:function(){ 

var pages = _fn,getPageData( ); 

var showPage = pages.showPage; 

var hidePage = pages.hidePage; 

var ShowPageName = showPage.name; 

var ShowPageData showPage.data; 

var hidePageName hidePage.name; 

var hidePageData = hidePage.data; 

setTimeout(function(){ 
showPageData.pageInfo.isCurrent="backup"; 
hidePageData.pageInfo.isCurrent="current",; 
showPageData.pageInfo.isShow="hide",; 
hidePageData.pageInfo.isShow="show",; 
newRenderData = {}; 
newRenderData[showPpageName]=showPageData,; 
newRenderData[hidePpageName]=hidePageData,; 
getCurrentPages()[0].setData(newRenderData); 
// 解 开 考题 锁 
pageLock = false,; 

},500); 


YoObiect {fname: "pagel”, pageInfo: Object, pageData: 


name: "pagel" 
pageData: null 
Y pageInfo: Object 
isCurrent: "backup" 
isShow: "hide” 
proto _: Object 
= _ 


>» getCurrentPages()[8].data.page2 


¥Obiject {fname: "page2”, pageInfo: Object, pageData: 


name: "page2" 
= pageData: Object 
Y pageInfo: Object 
isCurrent: "current”" 
isShow: “show” 


Object} 





图 7-10 pageInfo 对 象 


代码 清单 7-14 是 用 来 实现 统计 数据 的 代码 。 用 户 在 每 次 答题 完成 

后 ， 都 会 将 本 题 的 结果 保存 到 一 个 统计 对 象 中 〈 见 图 7-11) ， 以 供 系 统 
对 用 户 的 模拟 考试 或 者 顺序 学 习 的 成 果 进 行 评估 。 关 于 这 个 统计 对 象 ， 
顺序 学 习 与 随机 考试 有 共同 的 部 分 ， 都 会 将 用 户 完成 的 正确 的 题目 编号 
与 错误 的 题目 编号 添加 到 统计 对 象 中 。 不 同 的 是 顺序 学 习 会 将 用 户 的 完 
成 进度 也 保存 在 storage 中 ， 随 机 考试 则 会 在 页 面 数据 模型 中 ， 另 外 保存 
一 个 针对 本 次 考试 的 统计 对 象 ， 同 样 也 只 有 正确 题目 编号 和 错误 题目 编 
写 ， 这 个 统计 对 象 不 会 保存 到 storage 中 。 











vrandRecord: Object 
Pb correct: Array[19] 
vinCorrect: Array[39] 
Ss 21 


中- 
于 
二 
4: 
= 十 
6: 
p 
8: 
9: 


length: 39 
> _proto_ _: Array[9] 
> proto : Object 





图 7-11 答题 统计 的 数据 模型 


代码 清单 7-14 ”添加 统计 数据 





doRecord:function(args ){ 
var judgeRes = args,judgeRes ; 
var testType = getCurrentPages()[0].data.testTypeorg 
var currentIndex = getCurrentPages()[0].data.current; 
// 从 storage 中 初始 化 统计 对 象 
var orderRecord = examService.readExamRecord({ 
model:getCurrentPpages()[0].data.testModel, 
subject:getCurrentPages()[0].data.testSubject 
}); 
if(!orderRecord){ 
orderRecord = { 
correct:[], 
inCorrect:[], 
lastIndex:0 


}; 


var orderCorrectArr = orderRecord.correct;// 获 取 正 确 序 列 

var orderInCorrectArr = orderRecord.incorrect;// 获 取 错 误 序 列 

if(orderCorrectArr.indexof(currentIndex)>=0){ 
orderCorrectArr[orderCorrectArr.indexof(currentIndex)]=""; 
// 清 空 本 题 在 正确 序列 的 记录 
































if(orderInCcorrectArr ,indexof(currentIndex)>=0){ 
orderInCorrectArr[orderInCorrectArr .indexof(currentIndex)]=""， 
// 清 空 本 题 在 错误 序列 的 记录 


























} 

if(judgeRes===true){// 正 确 添 加 正确 序列 
orderCorrectArr.push(currentIndex); 

}else{// 错 误 添加 错误 序列 
orderInCorrectArr.push(currentIndex); 


} 
if(testType==="rand" ){// 答 题 模式 为 随机 考试 
// 初 始 化 统计 对 象 
vr randRecord = getCurrentPages()[0].data.randRecord||{correct:[],inCorrect:[]},; 
var correctArr = randRecord.correct 
var inCorrectArr = randRecord.inCorrect,; 
If(judgeRes===true){ 
// 添 加 到 正确 序列 中 
correctArr .push(CcurrentIndex ) ; 
}elsef{ 
// 添 加 到 错误 序列 中 
inCorrectArr.push(currentIindex); 
} 
getCcurrentPages()[0].data.randRecord = randRecord,; 
}else{// 答 题 模式 为 顺序 学 习 
var orderLastIndex = orderRecord.lastIndex;// 获 取 答题 进度 
// 更 新 进度 数据 


orderRecord.lastIindex = orderLastIndex<currentIndex?currentIndex:orderLastInde) 


} 
// 将 数据 保存 到 storage 中 
examService.saveExamRecord({ 
model:getCurrentPages()[0].data.testModel, 
subject:getCurrentPages()[90].data.testSubject, 
value:orderRecord 


}); 















































7.3.4 答题 结果 页 





图 7-12 是 学 习 结束 页 ， 用 户 在 顺序 学 习 或 者 模拟 考试 的 时 候 ， 可 以 
通过 点 击 结束 ， 碍 看 当前 类 型 学 习 的 成 绩 。 





代码 清单 7-15 是 用 来 泻 染 随机 考试 结束 页 的 代码 。 这 里 需要 注意 的 
征 randRecord 这 个 变量 ， 它 是 在 答题 页 通过 参数 传递 过 来 的 ， 值 就 是 答 
题 页 数据 模型 中 的 randRecord 变 量 〈 见 图 7-11) 。 页 面 会 根据 学 习 类 型 
以 及 正确 率 给 用 户 一 个 总 结语 。 代 码 清单 7-16 是 用 来 泻 染 顺序 学 习 的 结 
束 页 的 代码 ， 与 随机 考试 不 同 的 是 ， 统 计数 据 对 象 的 命名 变 为 
orderRecord， 而 且 来 源 也 不 是 通过 页 面 参数 ， 而 是 从 storage 中 获取 。 














C 科目 1 
顺序 学 习 


老司 机 


您 答对 了 128 道 题 中 的 120 道 
正确 率 为 98% 





图 7-12” 学习 结束 页 


代码 清单 7-15 ”随机 考试 结束 页 泻 染 





renderRandTest:function(param)t{ 
var randRecord = param.randRecord; 
var correctNum = randRecord.correct.length;// 回 答 正 确 的 题目 数量 
var total = param.testType==="4"?250:100;// 科 目 4 有 50 道 ， 科 目 1 有 100 道 
var percentage = (correctNum * 100 / total).toFixed(2)+'%';// 正 确 率 
var renderData = { 
model : param.model, 
subject : param.subject, 
testType: param.testType==='rand'?" 随 机 测试 " : "顺序 学 习 "， 
title:_fn.getTitle(testType,percentage),// 给 用 户 一 个 总 结语 
total:total, 
percentage:percentage, 
correct:correctNum, 
record:randRecord 





























了 
us.last(getCurrentPages()).setData(renderData); 


} 








代码 清单 7-16 ”顺序 学 习 结 束 页 泻 染 





renderOorderTest:function(param){ 

examService.readExamRecord({ 
model:param.model, 
subject:param. subject, 

},function(data)t{ 
var orderRecord = data,data， 
var correctNum = us.compact(orderRecord.correct).length,; 
var total = orderRecord.total; 
Var percentage = (correctNum * 100 / total).torFixed(2)+'%'; 


var renderData = { 
model : param.model, 
subject : param.subject, 
testType: param.testType==='rand'?" 随 机 测试 ": "顺序 学 习 "， 
title:_fn.getTitle(), 
total:total, 
percentage:percentage, 
correct:correctNum, 
record:orderRecord 


了 
us.last(getCurrentPages()).setData(renderData); 


}); 
} 





7.4 小 结 


本 章 实 例 项 目的 难点 有 两 个 : 


1) 单 页 面 的 设计 与 开发 。 通 过 交 蔡 使 用 两 个 考题 泻 染 字段 实现 了 
一 个 单 页 面 应 用 ， 从 而 实现 了 对 数据 量 很 大 的 页 面 达到 按 需 加 载 的 目 
的 。 








2) 缓存 的 应 用 场景 。 将 使 用 频率 很 高 并 且 数 据 量 很 高 的 数据 保存 
在 缓存 中 ， 减 少 用 户 的 加 载 等 每 时 间 以 及 流量 的 消耗 ， 同 事 也 提高 了 系 
统 的 稳定 性 。 


下 


第 8 草 ”各 例 分 析 一 一 打 提 
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微 信 文 付 是 集成 在 微 信 客 户 端 的 支付 功能 ， 用 户 可 以 通过 手机 快速 
完成 文 付 流程 。 目 前 微 信 文 付 在 实体 行业 和 互联 网 行业 的 在 线 文 付 领域 
占有 很 大 的 市 场 份额 ， 用 户 可 以 通过 扫 码 支付 、App 文 付 、 公 众 写 文 付 
等 途径 方便 地 与 商家 交易 。 现 在 微 信 的 传播 途径 又 添加 了 微 信 小 程序 这 
一 利 磺 ， 相 信 会 进一步 增加 市 场 对 微 信 文 付 的 需求 。 本 章 通过 一 个 简单 
的 打 委 功能 来 展示 微 信 文 付 是 如 何在 微 信 小 程序 中 开发 的 。 

















本 章 的 实例 App 不 会 有 太 多 小 程序 在 用 户 交 互 方面 的 功能 展示 ， 息 
只 完成 了 一 个 主要 功能 ， 就 是 微 信 文 付 。 用户 在 进入 App 之 后 ， 可 以 通 
过 小 程序 的 登录 接口 和 获取 用 户 信 息 接 口 得 到 自己 的 基本 信息 ， 如 了 昵 
称 、 头 像 、 所 在 省 市 等 ， 并 将 其 展示 在 页 面 上 ， 随 后 ， 用 户 可 以 点 击 页 
面 上 的 打 质 按钮 ， 触 发 客户 端 与 服务 器 交互 后 ， 得 到 一 次 微 信 文 付 的 机 
会 ， 用 户 在 完成 文 付 后 ， 再 次 进入 App， 会 看 到 目 己 文 付 过 的 记录 。 











为 了 使 读者 可 以 更 轻松 地 了 解 后 人 台 是 如 何 与 微 信 服务 器 进行 交互 
的 ， 本 章 的 服务 器 语言 选择 了 Nodejs 进 行 开 发 ， 以 减少 用 户 的 学 习 成 
本 。 


8.1.1 登录 流程 


在 讲解 登录 代码 之 前 ， 需 要 先 讲解 一 下 什么 是 登录 态 和 微 信 小 程序 
登录 态 《〈 以 下 简称 微 信 登录 态 ) 。 登 录 态 就 是 你 自己 的 服务 器 ， 认 可 当 
前 用 户 是 在 目 己 的 用 户 系统 中 存在 ， 而 颁发 给 客户 端的 一 个 凭证 ， 客 户 
端 可 以 带 着 这 个 和 凭证， 与 服务 器 交互 。 服 务 嚣 拿 到 这 个 登录 态 后 可 以 找 
到 自己 用 户 系统 的 对 应 用 户 ， 从 而 系统 可 以 给 用 户 提 供 菏 些 服 务 。 微 信 
登录 态 就 是 由 微 信和 颁发 给 当前 用 户 的 一 个 赁 证， 客户 端 可 以 带 着 这 个 攒 
证 与 微 信 交 互 ， 获 取 用 户 在 微 信 中 注册 的 信息 。 

















由 于 微 信 拥有 一 套 十 分 完善 的 用 户 系统 ， 所 以 很 多 互联 网 公司 都 采 
用 了 将 微 信 账 号 与 自己 的 账号 系统 相关 联 的 做 法 。 这 样 既 可 以 减少 用 户 
注册 和 登录 的 麻烦 ， 也 可 以 增加 自 喘 流量 的 来 源 。 

















微 信 登录 开发 大 致 可 以 看 成 两 个 部 分 : 前 器 开发 和 后 端 开 发 。 





前 端 开 发 主要 是 在 每 次 发 送 请 求 前 检查 用 户 当前 的 storage 中 ， 是 否 
保存 了 登录 态 ， 如 果 没 有 保存 ， 则 需要 调用 小 程序 的 接口 ， 获 取 微 信和 登 
录 的 code《〈 后 边 会 介绍 code 的 用 途 ) ， 然 后 根据 code 回 服务 器 请 求 登 录 





态 。 客 户 端 拿 到 登录 态 后 ， 每 次 向 自己 服务 器 发 送 请 求 的 时 候 ， 需 要 携 
市 登录 态 一 起 发 送 到 服务 器 器 ， 如 宁 服 务 器 端 判断 当前 的 登录 态 不 合法 
或 者 失效 ， 则 需 客户 端 重新 走 微 信 登 录 程 序 ， 并 且 回 目 己 的 服务 器 获取 


登录 态 。 


一 二 








后 端 开发 的 关注 点 在 于 判断 用 户 的 每 次 请 求 中 是 否 携 带 本 系统 的 登 
录 态 ， 如 果 有 登录 态 ， 则 验证 该 登录 态 是 售 正 确 。 如 果 没 有 登录 态 ， 则 
再 要 判断 用 户 是 否 已 经 在 微 信 登 录 ， 如 果 已 完成 登录 ， 则 使 用 微 信 登 ; 
code 匹 配 本 系统 的 用 户 ， 并 向 客户 端 发 送 登 录 态 。 如 果 未 登录 ， 则 需要 


提示 客户 端 登录 。 








用 户 每 次 微 信 登 录 成 功 之 后 ， 通 过 目 己 的 服务 器 回 微 信服 务 器 获取 
用 户 的 微 信 登录 态 ， 包 含 session_key 和 openId。 请 注意 这 两 个 数据 在 开 
发 中 会 经 常用 到 ， 如 果 泄 露 将 涉及 安全 问题 ， 所 以 一 定 要 在 服务 器 端 获 
得 并 保存 。 获 取 完 成 后 ， 服 务 器 应 当 将 这 些 信 息 与 自己 的 用 户 系 统 进行 
关联 ， 关 联 成 功 后 ， 需 要 生成 一 个 基于 自己 系统 的 登录 态 ， 这 个 登录 态 
需要 考虑 一 些 安全 因素 ， 首 先 要 保证 这 个 登录 态 的 随机 性 ， 还 要 保证 这 
个 登录 态 要 有 一 定 的 时 效 性 ， 最 后 将 这 个 登录 态 返 回 给 客户 中。 图 8-1 
征 微 信 官方 推荐 的 微 信 登录 流程 图 。 














小 程序 第 三 方 服务 器 微 信服 务 器 


wx.login() 获取 code 上 
1 
1 








appid + appsecret + code 已 
I 
es ‘session_key + openid -一 -一 一 一 一 一 一 


1 
1 
1 | 注意 : session_key 是 短信 服务 器 生成 的 针对 用 户 数据 
| 
1 
1 
1 





进行 加 密 签名 的 密 钥 ， 不 应 该 传输 到 客户 端 


el 
生成 3rd_session 
I [3ra_session 用 于 第 三 方 服务 器 和 小 程序 之 间 做 登录 态 
l 校 验 。 为 了 保证 安全 性 ，3rd_session 应 该 满足 : 
1 1. 长 度 足 况 长。 建议 有 2^128 种 组 合 ， 即 长 度 为 168; 
| 2. 避免 使 用 srand( 当 前 时 间 ) 然后 rand() 的 方法 ， 而 是 
1 采用 操作 系统 提供 的 真正 随机 数 机 制 。 比 如 Linux 下 面 
| 读 取 /dev/urandom 设备 ; 
| 
l 
1 
1 





3. 设置 一 定 有 效 时 间 ， 对 于 过 期 的 3rd_session 视 为 不 


合法 





= 
以 3rd_session 为 key, session_ key + openid 为 value， 写 入 session 存 依 


1¢ 
I 
session 存储 可 以 是 Redis、Memcached 之 类 的 kV 存储 


是 缠 
3rd_session 写 入 storage 


< 


后 续 用 户 进入 小 程序 ， 先 从 storage 该 取 


1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

1 

3rd_session 1 
1 


wx.request() 带 上 3rd_session 一 一 一 一 
1 
根据 3rd_session 在 session 存储 中 查找 合法 的 session_key 和 openid 
14— 


eT 


图 8-1 微 信 登 录 流 程 


8.1.2 ”源码 讲解 


图 8-2 是 打 贫 系统 的 主页 。 页 面 的 逻辑 比较 简单 ， 用 户 进 入 页 面 
后 ， 客 户 端 目 动 请 求 后 台 接口 ， 获 取 用 户 信息 。 如 果 后 合 没有 该 用 户 的 
言 轧 ， 则 客户 问 走 微 信 登 录 ， 获 取保 存在 微 信 服务 器 中 的 用 户 信息 ， 然 
后 将 此 信息 传 给 后 侣 。 后 人 台 保 存 数 据 后 ， 将 本 用 户 信 息 和 登录 态 返 回 客 
户 端 ， 客 户 问 将 该 登录 态 保存 到 本 地 的 storage 中 ， 供 其 他 请 求 使 用 。 

















代码 清单 8-1 是 index 页 面 的 onload 方 法 。 这 段 代 码 的 功能 是 在 进入 
后 ， 先 获取 用 户 信息 然后 将 用 户 信 息 泻 染 到 页 面 上 ，user.getUserInfo 方 
法 用 于 获取 用 户 信息 。 





代码 清单 8-1 打 赏 页 入 口 





onLoad: function () { 
console.1o0og('onLoad'); 
user .getUserInfo(function(userInfo){// 得 到 用 户 的 信息 
console.1log(userInfo); 
_fn.render({userInfo:userInfo});// 将 用 户 信息 展 示 在 


了 


















































面 上 

















己 





} 





代码 清单 8-2 是 user.getUserInfo 的 代码 。 它 接受 一 个 回调 方法 作为 参 
数 ， 并 在 成 功 得 到 用 户 信息 后 执行 。 在 这 段 代 码 中 ， 
user.WXUserRequest 是 一 个 陌生 的 方法 ， 它 的 本 质 是 包装 了 wx.request 这 
个 小 程序 原生 API。 包 装 这 个 API 的 原因 是 服务 器 提供 的 一 些 请 求 ， 需 
要 客户 端 提 供 存 储 在 storage 中 的 登录 态 ， 登 录 态 的 验证 与 生成 涉及 前 后 
台 比 较 复 杂 的 交互 ， 比 如 客户 端 在 何 时 进行 微 信 登 录 ， 何 时 重新 获取 登 
录 态 等 。 为 了 方便 这 些 逻 辑 的 重用 ， 需 要 将 验证 和 生成 登录 态 的 逻辑 与 
发 送 请 求 的 逻辑 抽象 在 一 个 方法 中 。 














代码 清单 8-2 ”getUserInfo 代 码 





getUserIinfo:function(callBack)t{ 
var url = constant.host + constant.path.getUserInfo;// 请 求 地 址 
user .wxUserRequest({ 
url:url 
},function(data)t{ 
if(typeof callBack === 'function'){ 
callBack(data); 


}); 





代码 清单 8-3 是 user.wxUserRequest 的 代码 ， 它 接受 两 个 参数 ，option 

ee 
callBack 是 请 求 成 功 后 的 回调 函数 。 方 法 开始 时 ， 
weixin.getSessionId《〈 下 文 介绍 ) 获取 用 户 的 登录 态 ， 这 个 方法 会 保证 返 

回 一 个 用 户 的 登录 态 。 得 到 登录 态 之 后 ， 它 将 与 用 户 传递 的 请 求 参数 合 
并 ， 发 送 到 客户 端 。 当 请 求 返 回 后 ， 如 果 没 有 网 络 问题 的 话 ， 则 开始 检 
查 服务 器 的 错误 码 ， 这 个 方法 只 检查 错误 码 为 0001 的 情况 ， 在 这 种 情况 
下 说 明 服 务 器 端 认为 客户 端 传递 的 登录 态 不 合法 ， 这 时 客户 端 需要 清空 
storage 中 的 这 个 登录 态 ， 递 归 这 个 方法 。 再 次 执行 时 ， 
weixin.getSessionId 方 法 会 重新 向 服务 器 请 求 新 的 登录 态 ， 保 证 第 二 次 发 
送 请 求 时 ， 服 务 器 会 认为 该 登录 态 合法 ， 从 而 返回 非 0001 的 错误 码 ， 之 
后 便 可 执行 参数 中 的 回调 函数 。 











代码 清单 8-3 ”wxUserRedquest 代 码 





wxUserRequest :function(option, callBack){// 封 装 微 信 请 求 
weixin.getSessionId(function(sessionId){// 这 个 方法 会 确保 返回 一 个 登录 态 
if(!sessionId)t{ 

wx.showModal({ 
title:' 错 误 '， 
contetn: ' 获 取 用 户 登 录 态 失败 '， 
showCancel:false 

}); 


return; 




















option.data = option,data || {0}; 
option.data.sessionId = sessionId;// 将 sessionId 与 请 求 参 数 合并 
wx.request({ 

url:option.uril, 

data:option.data, 

complete:function(result){ 

var resData = _fn.checkAjaxRes(result);// 判 断 请 求 是 否 成 功 








if(!resData)t 
return; 





} 
if(resData.code==='0001' ){// 服 务 器 认为 登录 态 不 合法 
wxService.setStorage({// 清 空 登录 态 后 重新 执行 。 








key:"sessionId", 

data:null, 

complete:function(){ 
utils.wxUserRequest(option,callBack); 


}); 
}elsef{ 
if(typeof callBack === 'function'){ 
callBack(resData); 


} 


}); 
});//end 





代码 清单 8-4 是 weixin.getSessionId 的 代码 。 这 个 方法 的 功能 集 获取 
与 返回 登录 态 于 一 身 。 它 只 接受 一 个 回调 函数 作为 参数 ， 这 个 回调 函数 
只 有 在 成 功 从 storage 中 取得 登录 态 后 会 被 调用 。 但 是 storage 中 可 能 会 没 
有 这 个 数据 ， 这 时 ， 就 需要 客户 端 辣 服务 器 病 发 送 请 求 ( 该 请 求 会 在 下 
文 介绍 ) ， 获 取 一 个 新 的 登录 态 。 在 服务 器 返回 新 的 登录 态 后 ， 客 户 端 
需要 将 其 保存 在 storage 中 ， 并 且 重 新 调用 这 个 方法 ， 这 样 做 虽然 有 些 党 
琐 ， 但 是 可 以 保证 回调 函数 中 的 登录 态 只 会 从 storage 中 获取 ， 并 且 该 方 
法 一 定 会 返回 一 个 登录 态 给 调用 函数 。 




















向 服务 器 请 求 新 的 登录 态 之 前 ， 需 要 客户 端 调用 小 程序 的 登录 接口 
wxX.login〈 返 回 值 见 图 8-3) 和 获取 用 户 信息 的 接口 wx.getUserInfo 〈 返 回 
值 见 图 8-4) 。 调 用 登录 接口 后 会 得 到 一 个 code 值 ， 这 个 值 是 用 户 进行 
微 信 登录 的 凭证， 只 有 通过 这 个 凭证 才能 拿 到 真正 的 微 信 登录 态 。 调 用 
获取 用 户 信息 的 接口 会 得 到 用 户 在 微 信 注 册 的 基本 信息 。 调 用 这 个 接口 








的 目的 是 客户 端 不 知道 当前 用 户 是 否 存 在 于 自己 的 用 户 系统 中 ， 所 以 客 
户 端 需要 向 服务 器 传 入 微 信 的 用 户 信息 ， 这 样 ， 服 务 器 如 果 判 断 出 用 户 
不 在 自己 的 用 户 系统 时 ， 可 以 将 该 用 户 注册 到 用 户 系统 。 


代码 清单 8-4 getSessionId 





getSessionId:function(callBack){ 
var sessionId = wxService.getStorage('sessionId'); 
if(sessionId&é&sessionId.1length>0){ 
if(typeof callBack === 'function')t{ 
callBack(sessionId); 


} 
}elsef{ 
weixin,.dowxLogin(function(wxLoginRes ){// 微 信和 登录 
weixin.getwxUserInfo(function(wxUserInfo){// 获 取 微 信用 户 的 信息 
Var param = { 

code:wxLoginRes .code, 
iv:wxUserInfo.iyv, 
signature:wxUserIinfo.signature, 
rawData:wxUserIinfo.rawData, 
encryptedData:wxUserInfo.encryptedData, 

















}; 
param = us.extend(param,wxUserInfo.userIinfo); 
console.1log("param", param); 
var url = constant.host + constant.path.getSessionId; 
wx.request({ 
url:url, 
data:param, 
complete:function(data)t{ 
console.1log(data); 
wxService,.setStorage('sessionId',data.data.sessionId); 
weixin.getSessionId(callBack); 


});//end wx.request 
});//end weixin.getwxUserInfo 
});//end weixin.dowxLogin 


doWxLogin VY Object {ferrMsg: "Login:ok", code: "gl11im8m2d2yqUVAB18m2d2Bwk2d2m8m2k"} 


code: "911m8gm2d2yYqUVAB19m2d2Bwk2d2m8m2K” 
errMsg: "1ogin:ok” 





图 8-3 ”wx.login 返 回 的 数据 


encryptedbata: “8XOcb9E7LCKFeZ4atwd7UnHlIXx]NDLbkwmjVH64+HAIPIdtxfdIKkfuhJf+6DX2seBAet]2NWCSFhEoli]19qRALJI+OF9k+YfUF5VEaDBUIl1IRwgS/C5217]47 晶 
errMsg: "getUserInfo:ok” 
iv: "6HgcNZbqCZRURuI6GPM3UA==” 
rawData: "{"nickName":" 力 思 ", "gender":1,"language":"zh_CN","city":"Chengdu","province":"Sichuan","country":"CN","avatarUrl":"http:/| 
signature: "fbe1865cbeb54b8e3d3bbfa78c6d2bcb7dba5988” 
vuserInfo: Object 
avatarUrl: "http://wx.qlogo.cn/mmopen/vi_32/Irllb9iciaBctlmiaBcyDal7mwmxPV1VLw3dgTBJjHvMSP4SrcfLs41KIRib8NDDC6EKLMGo7fGU7dJnkjpLK 
city: "Chengdu" 
country: "CN" 
gender: 1 
language: "zh_CN" 
nickName: " 力 思 " 
province: "Sichuan” 
: Object 


proto__ : Object 





图 8-4 ”wx.getUserInfo 返 回 的 数据 


下 面 将 介绍 本 案例 登录 的 后 台 代 码 ， 代 码 清单 8-5 是 请 
求 /wxapp/getSessionId 的 代码 。 这 个 请 求 是 客户 端 执行 
weixin.getSessionId 方 法 时 ， 在 用 户 本 地 storage 中 没有 登录 态 的 情况 下 发 
起 的 。 这 个 请 求 的 参数 就 是 上 文 提 到 的 微 信 用 户 的 基本 信息 和 登录 和 任 
证 ， 将 这 些 数据 传 入 userService.getUserWxSessionId 方 法 (下 文 介 
绍 ) ， 在 回调 中 返回 客户 端 新 的 登录 态 。 





代码 清单 8-5 ”请 求 /wxapp/getSessionId 





router.get('/wxapp/getSessionId',function(req, res, next){ 

var query = req， guery;// 获 取 请 求 参 妆 

// 根 据 客户 端 回 传 的 登录 信息 和 用 户 信 息 ， 获 取 一 个 新 的 登录 态 

USerService， getUserwWxSessionId(query, function(newSessionId){ 
res.json({// 获 取 登 录 态 成 功 后 ， 将 其 返回 客户 端 

sessionId:newSessionId 
}); 
return; 


}) 





















































I 代码 。 这 段 代 码 首 先 使 用 用 户 
的 微 信 登录 凭证 ， 通 过 handle.getWxSession (下 文 介绍 ) 方法 从 微 信服 








务 器 获取 该 用 户 在 微 信 的 登录 态 ， 该 登录 态 包 含 三 个 字段 : 
sessionKey、openId、expireDate。sessionKey 是 微 信 分 配给 用 户 的 一 个 
登录 标识 ， 这 个 标识 可 以 用 来 破解 wx.getUserInfo 方 法 返回 的 
encryptedData 中 的 加 密 数 据 。 这 个 sessionKey 是 非常 重要 的 数据 ， 不 能 
直接 发 送 给 客户 端 ， 需 要 我 们 将 其 保存 在 自己 的 数据 库 中 。openId 是 用 
户 针对 当前 小 程序 账号 〈appId) 的 唯一 标识 ， 这 个 字段 可 以 作为 我 们 
用 户 系统 与 微 信 用 户 系 统 的 关联 ， 我 们 在 设计 系统 时 应 该 考虑 根据 这 个 
openId 得 到 我 们 用 户 系统 的 用 户 数据 。expireDate 是 sessionKey 的 有 效 时 
间 ， 一 般 是 30 分 钟 左右 ， 与 客户 端的 登录 态 的 有 效 时 间 是 一 样 的 ， 这 也 
是 我 们 验证 客户 端 登录 态 是 否 合法 的 标准 。 





在 继续 介绍 该 方法 之 前 简单 介绍 下 本 案例 的 用 户 系统 。 图 8-5 与 图 8- 
6 分 别 存 储 了 用 户 的 基本 信息 和 登录 态 的 信息 。 用 户 的 基本 信息 来 自 于 
小 程序 方法 wx.getUserInfo 返 回 的 数据 ， 需 要 注意 open_id 也 在 这 个 表 
中 。 除 handle.getWxSession《〈 下 文 介 绍 ) 返回 的 数据 外 ， 登 录 态 的 信息 
还 保存 了 一 个 client_key， 这 个 值 束 是 客户 端的 登录 态 数 据 ， 这 个 数据 需 
要 保证 严格 的 加 密 程 序 。 最 后 ， 这 两 个 表 是 通过 open_id 关 联 起 来 的 。 


























再 回 到 getUserWxSessionId 方 法 ， 获 取 完 用 户 的 微 信 的 登录 态 之 
后 ， 系 统 根据 openId 碍 询 wxapp_user 表 ， 检 查 这 个 微 信 用 户 是 否 存 在 于 
本 地 的 用 户 系 统 中 ， 如 果 没 有 ， 则 目 动 将 用 户 注 册 在 本 系统 中 ， 然 后 将 
登录 态 保存 在 wxapp_user_session 中 。 如 果 用 户 已 经 存在 ， 则 直接 根据 








openId 更 新 wxapp_user_session 中 用 户 登 录 态 信息 。 
handle.updateSessionKey 方 法 兼容 了 保存 与 更 新 wxapp_user_session 表 的 


功能 ， 


之 后 将 新 的 客户 端 登录 态 传递 给 回调 函数 。 


代码 清单 8-6 getUserWxSessionId 





getUserwxSessionId:function(data,callBack)t{ 
var code = data.code; 
// 向 微 信 服务 器 获取 用 户 的 Sessionkey,openId 
handle.getwxSession({code:code},function(wxSessionInfo){ 


name 


province varchar 


city 


open_id varchar 


avatar_ur| varchar 








var openId = wxSessionInfo.openid; 
var sessionKey = wxSessionInfo.session key; 
data.openId = openId ; 
data.sessionId = sessionkey; 
data.expireDate = new Date(). getTime( )+wxSessionInfo. expires_in/1; 
// 根 据 微 信 的 openId 获 取 本 地 用 户 系统 中 的 用 户 
handle.getUserByOpenId( {openId:openId},function(user)t 
if(!user||user.length<=0){// 如 果 用 户 不 存在 ， 则 保存 
handle.saveUser(data, function(){ 
// 更 新 sessionKey 
handle.updateSessionKey(data,function(newSessionId)f{ 
if(typeof callBack === 'function'){ 
callBack(newSessionId); 


} 
全 ) 
}else{// 如 果 用 户 存在 ， 直 接 跟 新 sessionKey 
// 更 新 sessionKey 
handle.updateSessionkKey(data,function(newSessionId){ 


if(typeof callBack === 'function'){ 
callBack(newSessionId); 
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图 8-5 ”wxapp_user 表 


之 类 型 小 数 点 允许 空 信 ( 
EE 0 


sessino_key varchar 














open_id varchar 














0 
0 
expire_date datetime 0 
0 


client_key varchar 





图 8-6 ”wxapp_user_session 表 


代码 清单 8-7 是 hande.getWxSession 方 法 ， 是 获取 微 信 登录 态 的 代 
人 码 。 获 取 微 信和 登录 态 需 要 同 微 信服 务 器 发 送 一 个 https 请 求 ， 地 址 
是 https:Wapi.weixin.qq.comy/sns/jscode2session 。 这 个 请 求 接 受 四 个 参 
数 ，appid、secret、grant_type、js_code。appid 与 secret 都 可 以 在 小 程序 
账号 的 后 台 页 面 中 获取 〈 见 图 8-7) ，grant_type 是 固定 值 
authorization_code，js_code 是 调用 wx.login 方 法 返回 的 code (用 户 登 录 赁 
J" 


代码 清单 8-7 getWxSession 





getwxSession:function(data,callBack)t{ 
try{ 
var jscode = data,code 
if(jsCode)t{ 
var param = { 
appid : constant.appId,// 小 程序 的 appId 
secret: constant.secret,// 小 程序 的 secretcode 
grant_type:'authorization code', 
js_code:jsCode 


了 
var content = queryString.stringify(param); 
var option={ 
hostname: 'api.weixin.qq.com', 
path: '/sns/jscode2session?' + content, 
method: 'GET' 
}; 
var request = https.request(option,function(data)t{ 
data.on('data', function(chunk){ 
var UserInfo = JSON.parse(chunk); 
if(typeof callBack === 'function'){ 
callBack(userInfo),; 


} 


}); 


data.on('error', function(err){ 
console.1log('RESPONSE ERROR: ' + err); 
}); 
}); 


request.on('error', function(e) { 
console.1log('problem with request: ' + e.message); 


}); 


request ,end( ); 
}elsef{ 
console.1log("NO code passing"); 


ee 
console.1log(e); 


微 信 公 众 平台 小 程序 


开发 才 ID 


AppID( 小 程 所 ID) 


AppSecrel( 小 旭 闻 本 家) 


Teqwest 侣 法 域名 


个 月 内 可 申请 3 次 蜂 到 
socket 合 法 域名 志 RiEala 和 > 


uploadFile 广 法 域名 


downloadFile 全 法 讶 名 





图 8-7 获取 小 程序 的 appId 与 secret 


8.2 支付 


在 讲解 支付 前 ， 先 简单 介绍 下 如 何 开 通 小 程序 的 微 信 支付。 首先 进 
入 小 程序 账号 的 后 台 ， 来 到 如 图 8-8 所 示 的 页 面 。 如 果 未 申请 过 微 信 支 
付 的 话 ， 页 面 会 显示 “未 开通 ”。 之 后 开发 者 就 要 通过 资料 审核 、 账 户 验 
证 、 协 议 签署 三 个 步骤 后 才能 开通 。 需 要 注意 的 是 第 一 步 中 需要 填写 的 
与 企业 相关 的 信息 必须 与 注册 小 程序 账号 时 填写 的 信息 吻合 ， 否 则 会 导 
致 审核 不 通过 。 在 审核 通过 以 后 用 户 会 得 到 一 个 微 信 商户 平台 的 登录 id 
与 密码 ， 使 用 这 个 有 D 与 密码 进入 微 信和 商户 平台 后 ， 会 显示 如 图 8-9 所 不 
的 页 面 。 安 装 证 书后 ， 根 据 页 面 的 提示 ， 创 建 或 修改 API key。 请 注 
意 ， 这 个 key 非 常 重 要 ， 请 勿 随便 告知 他 人 。 


























图 8-8” 微 信 支 付 申请 


旨 微 信 支 付 | 商户 平台 页 。 “交易 中 心 。 ”账户 中 心 。 ”产品 中 心 。 ”数据 中 心 


操作 证 书 


行 市 核 任 务 


是 你 尚未 安装 操作 证 书 ， 趟 能 进行 敏感 操作 


已 审 极 任 务 


账户 设置 





图 8-9 ”修改 文 付 API key 


回 到 案例 讲解 ， 用 户 点 击 打 赏 按钮 后 ， 会 进入 支付 流程 ， 系 统 会 提 
示 用 户 消费 1 分 钱 。 这 个 过 程 大 致 可 以 分 为 四 个 阶段 。 第 一 个 阶段 是 用 
户 点 击 打 赏 按钮 ， 客 户 端 向 服务 器 获取 prepay_id。 用 户 要 通过 
WwWX.requestPayment 调 起 文 付 界面 ， 需 要 传 入 prepay_id。 这 个 参数 需要 一 
个 相对 复杂 的 流程 从 微 信 服务 器 获取 ， 所 以 第 二 个 阶段 是 后 台 向 微 信服 
务 器 获取 prepay_id， 并 将 客户 站 执行 wx.requestPayment 所 需 的 全 部 参数 
返回 客户 端 。 第 三 个 阶段 是 前 台 调 起 支付 界面 ， 供 用 户 发 起 支付 。 第 四 
个 阶段 是 在 用 户 支 付 完成 后 ， 等 待 微 信 服务 器 的 完成 支付 回调 请 求 。 下 
边 将 详细 介绍 第 二 阶段 的 开发 。 











代码 清单 8-8 是 获取 prepay_id 的 主要 轴 辑 ， 它 首先 检查 用 户 是 否 登 


录 ， 如 果 没 有 登录 ， 则 返回 0001 错 误 码 ， 提 示 客 户 端 重新 登录 ， 获 取 微 
信和 登录 态 和 客户 端 登录 态 。 如 有 果 用 户 已 经 登录 ， 则 执行 getPaymentInfo 
方法 获取 prepay_id。 





代码 清单 8-8 ”请求 prepay_id 的 主要 逻辑 





try{ 
// 检 查 用 户 是 否 登 录 
userService.checkUserSessionId({sessionId:query.sessionId}, 
function(result){ 
if(!result.isValid){// 未 登录 则 要 求 用 户 登 录 
res.json({ 
code:"0001" 




















}); 
return; 


} 

// 获 取 用 户 信息 

userService.getUserUserByCode({code:query.sessionId}, 

function(result){ 
getPaymentInfo(result);// 请 求 prepay_id 








了 


}); 
}catch(e)t{ 
console.1log(e); 


} 





获取 微 信 的 prepay_id 的 方法 是 同 微 信服 务 需 发 送 一 个 HTTPS 请 求 ， 
请 求 地 址 是 https://api.mch.weixin.qq.com/pay/unifiedorder 。 这 个 请 求 需 
要 传递 的 参数 有 许多 ， 具 体 可 以 参考 官网 
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php? chapter=9_1 。 开 发 者 在 
开发 过 程 中 要 注意 : 官网 标注 的 必 填 字段 是 必 不 可 少 的 ， 但 是 有 些 非 必 
填 的 字段 ， 在 一 些 特殊 的 支付 方式 中 也 是 必 填 的 ， 如 本 例 使 用 的 JSAPI 
文 付 方式 就 要 求 传递 用 户 的 openid， 但 是 这 个 字段 在 官网 文档 上 并 没有 
标记 为 必 填 。 

















代码 清单 8-9 是 实现 获取 prepay_id 的 代码 。 这 段 代 码 首先 创建 了 一 
个 wxpay 对 象 ， 这 个 对 象 是 对 微 信 文 付 抽象 出 来 的 一 个 对 象 ， 它 的 创建 
需要 三 个 参数 ， 分 别 为 appid、mch_id〈 商 户 Id) 、partner_key〔 商 户 的 
apikey) ， 在 前 文中 有 介绍 。 这 么 抽象 的 原因 有 两 个 ， 第 一 个 原因 是 在 
各 种 微 信 支付 类 型 中 ， 只 有 这 三 个 参数 是 常量 ;第 二 个 原因 是 ， 在 正式 
的 开发 中 ， 这 三 个 参数 应 该 是 保密 的 ， 对 业务 开发 者 应 该 是 个 黑 盒 ， 业 
务 方 只 需要 传递 其 他 参数 即 可 。 创 建 完 wxpay 对 象 后 ， 调 用 这 个 对 象 的 
createUnifiedOrder 方 法 ， 获 取 prepay_id 的 请 求 就 是 在 这 个 方法 中 发 送 
的 。 请 求 完成 后 〈 返 回 数据 见 图 8-10) ， 如 果 有 数据 返回 ， 并 且 返 回 的 
return_code=success 以 及 return_msg=ok 时 就 证 明 获 取 prepay_id 成 功 。 之 
后 将 客户 病 调 起 支付 页 面 的 参数 回 传 客户 站 。 




















代码 清单 8-9 ”getPaymentInfo 代 码 





var getPaymentInfo = function(userInfo)t{ 
try{ 
Var wxpay = WXPayService({ 
appid: constant.appId,//appid 
mch_id: constant .mchId, // 商 户 Id 
partner_key:constant. apikey// 商 户 Id 密码 


Th 





学 
console.log("clientIp ",utils.getClientIP(redq)); 
wxpay. createUnifiedorder({ 
body:constant .paybody, // 商 品 描述 
out_trade_no:wxpay.md5(new Date().getTime()),// 内 部 商品 订 兰 
total_fee:1,// 价 格 
spbill_ create _ip:utils.getClientIP(req),// 终 端 IP 
notify_url:constant.notifyUrl,// 通 知 地 址 
trade_type:'JSAPI',// 支 付 类 型 
openid:userInfo.open_id,// 用 户 openId 
},function(prepayInfo)t{ 
var result; 
if(!prepayInfo){// 请 求 失败 
result = { 
code:'1000°', 
errMsg: ' 出 错 啦 ! 

















di 





















































}else if(prepayInfo.return_code!='success' ){// 接 口 报错 
result = { 


code: '1001'， 
errMsg:prepayInfo.return_msg 


}; 
}else{// 成 功 获取 prepayId 

result = 
code:"0000", 

data:{// 前 端 调 起 支付 框 需要 的 参数 
timeStamp :new Date().getTime(), 
nonceStr:payUtil,generateNonceString()， 
package:prepayInfo.prepay_id, 
signType:"MD5", 











}; 
paySign = wxpay .sign(result);// 生 成 签名 
result.paySign = paySign; 


res.json(result); 


}catch(e){ 
console.1log(e); 
} 
}; 


[ee | 


xmnl xretum_ code><t ECDATALSUGCESS 1 /return_code»y 
return_mnsyg><* [CDATALOKNI] > /return_ ms 可 > 

appid><! CCDATA Col EE EE 1 >»,/appid> 
HIT 1 < /mch_id> 
nonce_stE><* [CDATALILI?RLKEIJTISSCHNBSSQI > /NoNce str> 


五 了 Sn 大 [CDATAIAANSS?7?BSES3477Bb6CDPF2DDE366G5A928B] 17/51ign> 
result_coduc2<cy [CDATALISUCCESS ]]2<mresult_codec> 

prepay id><cycCDhTRIwx2EB6li25205Bd469a8duae33hbgpol3455577]112<prenpay au> 
上 Pade_tvyvpe>cfyTCDphIALEJSRPI]]xKAtPatle_tuype> 

-Xml1> 





图 8-10 ”成功 获取 prepay_id 


代码 清单 8-10 是 生成 签名 的 代码 。 在 获取 prepay_id 的 开发 中 ， 有 一 
个 重要 的 环节 就 是 生成 签名 ， 笔 者 也 是 在 生成 签名 的 地 方 纠 结 了 很 久 。 
生成 签名 的 具体 步骤 请 参考 官网 的 介绍 
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php? chapter=4 .3 ， 在 此 只 通 
过 一 个 简单 的 例子 说 明 这 个 步骤 ， 以 及 开发 者 在 开发 过 程 中 遇 到 微 信 服 
务 器 返回 “签名 错误 ”时 应 该 如 何 排查 问题 。 








代码 清单 8-10 ”生成 签名 的 代码 





WXPay .mix(' Sign'，Tfunction(param){ 
var querystring = Object,.keys(param),filter(function(key){ 
return param[key] !== undefined &&// 排 除 值 为 空 的 参数 
param[key] !== '' && 
['pfx',，'partner_key'，'sign',，'key'].indexof(key)<0;// 排 除 不 参与 排序 的 参数 
}) .sort().map(function(key){// 排 序 并 且 生 成 url 参 数 格式 
return key + '=' + param[key]; 
}) .join("&") + "&key=" + this.options.partner_key;// 最 后 将 apikey 放 在 后 边 
return md5(querystring).toUpperCase();//MD5 加 密 并 转 大 写 


了 

















代码 清 蛙 8-11 到 8-15 以 一 个 模拟 的 实例 说 明了 在 支付 方式 为 JSAPI 
的 情况 下 生成 签名 的 过 程 。 遇 到 微 信 服务 器 返回 的 错误 信息 为 签名 错误 
时 ， 可 以 通过 微 信 官 网 提供 的 签名 检测 工具 进行 校 验 (如 图 8-11)〉 。 如 
果 发 现 工具 人 返回 的 签名 与 自己 代码 生成 的 签名 不 一 致 ， 则 有 可 能 是 自己 
的 签名 算法 出 了 问题 ， 如 果 工 具 返 回 的 签名 与 自己 代码 生成 的 一 致 ， 则 
开发 者 应 该 考虑 参数 是 否 有 不 合法 的 情况 ， 如 appid 或 者 apikey 不 正确 


等 























下 二 o 
AN Ry 下 二 NT 、\ 

代码 清单 8-11 模拟 请 求 数据 

{ 
body: ' 多 点 生 鲜 -网 上 好 超市 '， 
out_trade_no: ‘ec1i5ba59d1a43b4d9fbe0d238cc96fe2, 
total_ fee: 1, 
spbill create_ip: '127.0.0.1', 
notify_url: 'wx.dmall.com', 
trade_type: 'JSAPI', 
openid: 'openId', 
nonce_str: '1bq207YZ8uasVr6IbXdiv5knLq9XwRXq'， 
appid: "appid '， 
mch_id: "mch_id'， 

} 





代码 清单 8-12 ”字典 序 排 列 后 的 数据 





appid: "appid'， 


body: ' 多 点 生 鲜 -网 上 好 超市 '， 
mch_id: "mch_id'， 
nonce_str: '1bq207YZ8uasVr6IbXdiv5knLq9XwRXq'， 
notify_url: 'wx.dmall.com', 

openid: 'openId', 

out_trade_no: "ec15ba59d1a43b4d9fbe0d238cc96fe2 ' ， 
spbill create_ip: '127.0.0.1', 

total_ fee: 1, 

trade_type: 'JSAPI', 














代码 清单 8-13” ”URL 参数 化 的 数据 





appid=appid&body= 多 点 生 鲜 -网 上 好 超市 &mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IbXxd1v5knL 











代码 清单 8-14 ”添加 APIKEY 的 数据 





appid=appid&body= 多 点 生 鲜 -网 上 好 超市 &mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IbXxd1v5knL 











代码 清单 8-15 ”通过 MD5 算 法 得 到 的 数据 





5F62CF23F03920456FF32862CCD7E801 





8 了 3 小 党 


本 章 实 例 主要 讲解 了 两 个 功能 点 : 


1) 小 程序 的 登录 API 以 及 后 合用 户 系 统 的 开发 ， 读 者 可 以 了 解 到 如 
何 将 自己 的 用 户 系统 与 微 信 的 用 户 系 统 结 合 ， 实 现 使 用 微 信 账 号 登录 本 
系统 的 功能 。 





2) 小 程序 的 文 付 API 以 及 微 信 的 文 付 API 的 使 用 ， 读 者 可 以 了 解 使 
用 微 信 文 付 的 基本 流程 。 





appid 
mch_id : mch_id 
body : 多 点 生 鲜 - 网 上 好 超市 
nonce_str : 1bq207YZ8uasVr6IbXdlv5knLq9XwRXq 
notify_url : wx.dmall.com 
openid : openld 
out trade_no : ecl5ba59d1a43b4d9fbe0d238cc96fe2 
spbill_create_ip : 127.0.0.1 
total fee 
trade type 


key 


“es E233 


##1. 对 参数 按照 key=value 的 格式 ， 并 按照 参数 名 ASCI 字 典 序 排序 生成 字符 圳 : 

appid=appid&body= 多 点 生 坪 -网 上 好 超市 &mch_id=mch_id&nonce_str=1lbq207YZ8uasVr6IbXdlv5knLq9XwRXq&notify_ uri=wx.d 
mall.com&openid=openld&out trade no=ec15ba59d1a43b4d9fbe0d238cc96fe2&spbilLcreate_ip=127.0.0.1&total fee=1&trade_ 
type=JSAPI 


#2. 连 接 商 户 key : 

appid=appid&body= 多 点 生 鲜 -网 上 好 超市 &mch_id=mch_id&nonce_str=1bq207YZ8uasVr6IlbXdlv5knLq9XwRXq&notify_url=wx.d 
mall.com&openid=openld&out trade_no=ec15ba59d1a43b4d9fbe0d238cc96fe2&spbilLcreate_ ip=127.0.0.1&total fee=1l&trade_ 
type=JSAPI&key=key 


#3.md5 编 码 井 转 成 大 写 : 
5F62CF23F03920456FF32862CCD7E80 





图 8-11 微 信 签名 校 验 工具 





第 9 章 ”各 例 分 析 一 一 日 程 表 


随 着 社会 节奏 的 变 快 ， 人 们 的 生活 内 容 变 得 更 加 充实 ， 我 们 在 享受 
丰富 多 彩 生活 的 同时 ， 也 饱 受 手忙脚乱 带 来 的 烦恼 ， 所 以 一 球 基 于 日 程 
管理 功能 的 App 便 是 解救 “大 忙 人 ”的 日 常 必 备 。 本 章 的 练习 项 目 是 日 程 
表 ， 该 项 目的 主要 功能 是 计划 和 管理 自己 的 日 程 。 通 过 本 章 的 学 习 ， 读 
者 可 以 进一步 了 解 如 何 开发 和 设计 复杂 的 基于 微 信 小 程序 的 App。 本 项 
目的 源码 地 址 为 https://github.com/wxapp-book/calendar.git 。 

















9.1 业务 流程 








日 程 表 App 包 括 3 个 页 面 : 首页 、 日 程 详情 页 、 管 理 页 。 下 面 将 分 


别 介绍 各 个 页 面 的 主要 功能 。 


首页 〈 见 图 9-1) : 系统 的 入 口 页 面 ， 分 为 三 个 区 域 : 日 期 区 域 ， 
日 历 区 域 和 日 程 区 域 。 日 期 区 域 默 认 显 示 当 天 的 日 期 ， 点 击 后 可 以 进 
入 “日 程 管理 ”页面 。 日 历 区 域 显示 当月 的 日 历 ， 用 户 可 以 点 选 日 历 上 的 
日 期 刷新 日 期 区 域 的 显示 信息 。 日 程 区 域 提 供 操作 当天 日 程 的 功能 。 进 
入 页 面 后 ， 系 统 会 自动 从 缓存 中 读 取 当天 的 日 程 安排 ， 读 完 后 会 根据 这 
些 日 程 的 开始 时 间 、 结 束 时 间 ， 以 及 用 户 是 否 标记 该 日 程 已 经 结束 ， 将 
其 分 为 三 个 列表 : 进行 中 日 程 列 表 、 未 开始 日 程 列 表 、 已 结束 日 程 列 
表 。 下 面 是 列表 说 明 : 




















早报 
结束 10:23 


早 会 
结束 10:23 


品牌 设计 方案 讨论 
结束 10:23 





图 9-1 首页 





“进行 中 日 程 ?列表 包含 了 当前 时 间 晚 于 日 程 开 始 时 间 的 日 程 ， 但 
是 并 不 限制 当前 时 间 早 于 日 程 结 束 时 间 。 这 个 列表 会 把 日 程 的 结束 时 间 
显示 在 界面 上 上。 用户 点 击 这 些 日 程 后 ， 页 面 确 部 会 弹出 浮 层 ， 用 户 可 以 
选择 更 新 日 程 ， 跳 转 的 日 程 详情 页 修改 日 程 信息 。 也 可 以 选择 完成 日 
程 ， 将 该 日 程 从 进行 中 日 程 列 表 中 移 除 。 





“未 开始 日 程 ? 列 表 包 含 了 当前 时 间 早 于 日 程 开 始 时 间 的 日 程 。 这 
个 列表 会 把 日 程 的 开始 时 间 显 示 在 界面 上 。 用 户 点 击 这 些 日 程 后 ， 页 面 
底部 会 弹出 浮 层 ， 用 户 只 有 一 个 选项 就 是 “修改 日 程 ”， 点 击 后 跳 转 日 程 


详情 页 修改 日 程 信息 。 





“已 结束 日 程 * 列 表 包 含 了 用 户 在 “进行 中 日 程 列表 ”中 通过 “完成 日 
程 功 能 ”从 该 列表 中 移 除 的 日 程 。 该 列表 不 会 展示 日 程 的 开始 时 间或 者 
结束 时 间 ， 用 户 点 击 后 也 不 会 有 浮 层 弹出 。 用 户 创 建 的 日 程 在 这 个 列表 
中 完成 生命 周期 的 闭环 。 














日 程 详情 页 〈 见 图 9-2) : 查看 、 修 改 、 创 建 日 程 。 日 程 详情 页 有 
三 个 入 口 ， 首 页 有 两 个 ， 分 别 为 创建 当天 的 日 程 和 修改 当天 的 日 程 。 日 
程 管理 页 有 一 个 入 口 ， 作 用 是 创建 不 同日 期 的 日 程 。 日 程 详情 页 在 创建 
或 修改 日 程 后 会 自动 返回 调用 页 面 。 











日 程 管理 页 面 《 见 图 9-3) : 页 面 由 两 个 区 域 组 成 ， 日 历 区 域 和 日 
程 区 域 。 日 程 管理 页 只 有 一 个 入 口 ， 首 页 的 日 期 区 域 。 用 户 点 击 该 区 域 
后 ， 会 将 当时 显示 的 日 期 传 入 日 程 管理 页 面 作为 日 程 管理 页 面 日 历 区 域 
的 首选 日 期 ， 并 且 以 该 日 期 为 准 ， 同 后 展示 七 天 作为 可 选 日 期 ， 用 户 所 
击 日 期 后 ， 会 刷新 下 方 的 日 程 管 理 区 域 ， 并 且 用 户 点 击 页 头 的 添加 日 程 
按钮 ， 会 进入 日 程 详情 页 为 该 日 期 添加 日 程 的 。 日 程 管理 区 域 是 一 个 表 
格 ， 一 共有 24 行 ， 代 表 了 一 天 的 24 个 小 时 ， 表 格 的 列 数 是 根据 该 日 期 日 
程 的 多 少 及 日 程 的 时 间 分 布 动态 生成 的 ， 具 体 的 逻辑 会 在 下 面 功能 点 分 


析 小 节 详 细 介绍 。 

















编辑 事件 


2016 年 12 月 16 日 周 日 14:00 


2016 年 12 月 16 日 周 日 15:00 





图 9-2 日程 详情 页 


微 信 商城 2.1 需 求 讨 论 


2016 年 12 月 16 日 周 日 1 
2016 年 12 月 16 日 周 日 


也 


到 


编辑 





图 9-3 日 程 管理 页 


9.2 ”项目 染 构 


9.2.1 功能 点 分 析 


本 项 目的 开发 难点 主要 有 两 个 ， 第 一 是 如 何 存 储 日 程 数 据 ， 第 二 是 
日 程 管理 页 面 的 日 程 区 域 。 





存储 日 程 数据 : 本 章 的 练习 项 目 是 一 个 纯 本 地 项 目 ， 没 有 与 服务 器 
的 交互 ， 所 以 ， 日 程 数据 都 需要 存储 在 小 程序 的 storage 中 。 由 于 系统 需 
要 经 常 添加 ， 修 改 和 查询 日 程 ， 所 以 一 套 融 效 和 稳定 的 日 程 存储 方 双 就 
是 保证 系统 稳定 的 前 所。 





存储 一 共 涉 及 了 两 个 对 象 ， 日 期 对 象 和 日 程 对 象 。 这 两 个 对 象 的 键 
值 分 别 以 date_ 和 task_ 开头， 日 期 对 象 会 以 被 创建 日 期 零点 的 宣 秒 值 作 
为 结尾 ， 而 日 程 对 象 则 会 以 当前 时 间 的 坚 秒 值 作 为 结尾 ， 这 样 ， 就 保证 
了 日 期 对 象 和 日 程 对 象 的 唯一 性 。 


在 创建 日 程 之 前 ， 需 要 检查 storage 中 是 否 保存 了 当前 的 日 期 对 象 ， 
因为 日 程 需要 与 日 期 关联 起 来 才 会 在 首页 和 日 程 管理 页 被 查询 出 来 。 而 
在 日 期 对 象 中 ， 保 存 一 个 关联 了 当日 所 有 日 程 的 列表 ， 每 当 创建 完 日 程 
后 ， 需 要 将 该 日 程 的 id 添加 到 这 个 列表 中 。 











日 程 管 理 页 面 的 日 程 区 域 : 这 个 区 域 是 一 个 表格 ， 一 共有 24 行 ， 代 
表 了 一 天 的 24 个 小 时 ， 表 格 的 列 数 根据 该 日 期 日 程 的 多 少 及 日 程 的 时 间 
分 布 动态 生成 。 在 向 表格 添加 日 程 的 时 候 ， 会 优先 添加 到 最 左边 的 列 ， 
如 果 该 列 的 相关 时 间 段 没有 其 他 日 程 ， 则 该 日 程 会 被 添加 到 该 列 ， 如 果 
该 列 的 相关 时 间 段 已 有 其 他 日 程 ， 则 需 检查 右 相 邻 列 的 相关 时 间 段 是 否 
有 其 他 日 程 ， 如 果 所 有 列 相 关 时 间 段 都 不 满足 添加 的 条 件 ， 则 创建 一 个 
新 列 添 加 这 个 日 程 。 例 如 图 9-3 所 示 ， 第 一 列 与 第 二 列 ， 都 有 一 个 10: 
41 到 11: 41 的 日 程 ， 如 果 这 时 再 添加 一 个 该 时 间 段 内 的 日 程 ， 则 这 两 列 
都 没有 办 法 显示 这 个 日 程 ， 需 要 再 创建 一 个 列 去 存放 这 个 日 程 。 

















9.2.2 ”项目 结构 图 


项 目 结构 如 图 9-4 所 示 。 


vw (CS calendar 
v common 
= «ss 
vj 
加 constantjjs 
因 Semvice,js 
加 wxjs 
vlib 


四 momentjjs 


因 underscorejs 


Vv CB pages 
v CC create 
时 createjs 
create,Wxml 
因 create,wxss 
Vv CG daytask 
国 daytaskjs 
daytask,wxml 
加 daytask.wxss 
v CS index 
因 index,js 
index.wxml 
加 index.wxss 
v CC utils 
vtiljs 
因 appjs 
四 appjson 
加 app.wxss 





图 9-4 项目 结 构图 
下 面 介 绍 各 个 部 分 所 承担 的 功能 。 
common 存 放 一 些 公 共 业 务 相 关 的 代码 ， 其 中 : 


“WX.js: 封装 一 些微 信 小 程序 的 底层 API。 在 开 友 过 程 中 ， 有 一 些 扩 
层 的 小 程序 API 需 要 我 们 对 其 根据 自身 业务 进一步 封装 的 。 








:constant.js: 保存 系统 的 常量 ， 例 如 一 些 常 用 的 storage key。 


service.js: 向 外 提供 了 dateService 和 taskService 两 个 类 ， 这 两 个 类 


的 作用 是 向 业务 代码 提供 了 保存 、 修 改 、 读 取 日 期 和 日 程 的 功能 代码 。 
lib 存 放 第 三 方 的 类 库 ， 其 中 : 


-underscore.js: 微 信 小 程序 的 开发 是 基于 数据 模型 的 ， 所 以 ， 会 有 
大 量 的 数据 操作 ， 比 如 列表 查询 ， 数 据 格式 转换 等 工作 。 在 这 里 选择 
underscore.js 作 为 数据 处 理 的 工具 ， 他 有 很 多 优势 如 十 分 小 巧 ， 压 缩 后 
只 有 4KB; 使 用 方法 简单 ， 它 所 供 了 几 十 种 函数 式 编程 的 方法 ， 大 大 方 
便 了 JavaScript 的 编程 ， 窗 盖 面 三 ， 包 含 了 操作 集合 、 数 组、 函数 和 对 象 
的 方法 ; 社区 人 气 品 ， 不 用 担心 找 术 文 持 的 问题 。 








:moment.js: 一 个 功能 非常 强大 的 时 间 操 作 工具 。 在 项 目 开发 的 过 
程 中 ， 会 大 量 涉及 日 期 的 操作 ， 如 改变 日 期 的 输出 格式 ， 获 取 下 一 天 ， 


获取 茶 星 期 、 东 月 的 第 一 天 和 最 后 一 天 ， 获 取 茶 一 天 的 开始 时 间 的 坚 秘 
和 结束 时 间 的 曙 秒 等 ， 这 些 功能 如 果 全 部 目 己 开发 会 非常 耗 时 ， 而 且 这 
些 功 能 不 是 我 们 关注 的 重点 ， 所 以 选择 了 moment.js 作 为 日 期 的 工具 库 ， 
以 便 我 们 更 加 专注 业务 的 实现 。 








pages 存 放 页 面 代 码 ， 其 中 : 
:create: 日 程 详情 页 
“daytask: 日 程 管理 页 。 


:index: 首页 。 


9.3 ”代码 分 析 








在 日 程 App 里 ， 首 页 与 日 程 管理 页 都 再 要 依赖 日 程 数据 ， 而 日 程 详 
情 页 不 需要 依赖 任何 数据 ， 并 且 日 程 详情 页 可 以 用 来 创建 日 程 数 据 ， 所 
以 开发 时 选择 该 页 面 作为 入 手 点 。 日 程 管理 页 需要 依赖 首页 为 其 传 入 参 
数 ， 而 且 日 程 管理 页 的 开发 难度 较 高 ， 所 以 日 程 管理 页 放 在 了 最 后 一 个 
去 开发 。 本 章 市 的 讲解 顺序 也 会 按照 这 个 思路 展开 。 








9.3.1 日 程 详情 页 


日 程 详情 页 主要 用 于 创建 和 修改 日 程 ， 所 有 与 日 程 有 关 的 数据 都 会 
出 现在 这 个 页 面 ， 图 9-5 古 这 个 页 面 的 数据 模型 。 下 面 对 数 据 模 型 中 的 








:curDate: 当前 日 程 的 moment 对 象 。 在 进入 日 程 详情 前 ， 用 户 需 要 
选择 日 期 或 者 选择 一 个 日 程 。 所 以 本 页 面 只 需 使 用 上 级 页 面 传递 过 来 的 
日 期 或 者 当前 日 期 即 可 。 


:pageType: 用 来 标记 当前 页 面 是 被 用 作 创 建 日 程 还 是 被 用 作 修改 
日 程 ， 该 字段 有 两 个 可 选 值 : create 和 update。 





task: 创建 或 者 修改 的 日 程 数据 ， 同 时 也 是 本 页 面 泻 染 需要 的 数 
据 ， 包 括 开始 时 间 ， 结 束 时 间 ， 重 要 性 ， 日 程 内 容 等 。 这 个 对 象 最 后 会 
被 保存 到 storage 中 作为 日 程 数据 供 首页 和 日 程 管理 页 调用 。 











taskImportant: 日 程 重 要 性 选项 。 日 程 重 要 性 的 选择 会 通过 小 程序 
的 picker 组 件 去 实现 ， 这 个 字段 中 的 数据 会 作为 这 个 组 件 的 参数 被 使 
用 。 


> getCurrentPage SE dete 
Vv Objec A webviewlId _: 2, curDate: Moment, task: Object, taskTime: Object, taskIimportant: Array[2].} 


ewId 
pc curDa te: Moment 
page ne "create” 
vtask: object 
date 人 
ndTime: "14 
endTimeMs: 1482 人 
m__fnr 





图 9-5 日 程 详情 页 -数据 模型 


-taskTime: 为 了 减少 交互 的 复杂 度 ， 用 己 选 择 日 期 的 组 件 同样 选择 
bp 这 个 组 件 在 作为 时 间 选 择 器 的 时 候 ， 可 以 指定 可 选 时 间 的 范 
围 ， 通 过 设置 这 个 范围 ， 就 避免 了 每 次 提交 日 程 时 去 验证 日 期 是 否 合 法 
的 麻烦 。taskTime 这 个 对 象 就 是 用 来 泻 染 开始 时 间 和 结束 时 间 的 对 象 。 
用 户 每 次 进入 该 页 面 或 者 切换 开始 时 间 时 ， 都 会 触发 这 个 对 象 的 更 新 ， 
然后 刷新 picker 组 件 的 行为 。 











代码 清单 9-1 是 日 程 详情 页 加 载 的 代码 ， 这 段 代码 的 主要 工作 就 是 
初始 化 上 文 提 到 的 五 个 页 面 模型 字段 。 首 先 ， 传 入 该 方法 的 参数 可 能 
两 个 ，pageType 和 key。 当 pageType 为 create 时 不 会 有 key 传 入 ， 会 初始 化 
一 个 默认 的 task 对 象 。 而 当 pageType 为 update 时 ， 就 会 有 key 对 象 传 入 ， 

这 时 就 需要 根据 这 个 key 从 storage 中 获取 对 应 的 task 对 象 供 页 面 泻 染 所 


用 。 


代码 清单 9-1 日 程 详情 页 加 载 





onLoad:function(option)t{ 
var pageType = option.pageType||'create'; 
Var task; 


var curDate; 

if(pageType === 'create' ){ 
var ms = _option., ms || new Date().getTime(); 
curDate = moment (ms, "x"); 
task = { 











title: "新 建 日 程 "， 
important: "一 般 "'， 
date: moment (ms, ‘x' ). format("YYYY-MM-DD") 











}; 
}elsef{ 
var key = option.key; 
if(key){ 
task = taskService.get({key:key}); 
curDate = moment(task.StartTimeMs ) ， 


this.setData({curDate:curDate}); 
var taskTime = _fn.getTaskTime(task); 
var taskImportant = [' 一 般 ',' 重 要 ']，; 
this.setData({ 
task:task, 
taskTime:taskTime, 
taskIimportant:taskIimportant, 
pageType:pageType, 


了 











代码 清单 9-2 是 刷新 taskTime 对 象 的 方法 。 这 个 方法 会 在 用 户 修改 开 
始 日 期 、 结 束 日 期 或 者 选择 是 否 全 天 日 程 时 被 调用 。 这 段 代码 的 主要 逻 
辑 是 ， 在 刚 进入 页 面 时 ， 开 始 时 间 和 结束 时 间 分 别 为 当前 时 间 和 当前 时 
间 回 后 推移 一 个 小 时 ， 在 用 户 修 改 开 始 时 后 ， 如 果 结 束 时 间 早 于 开始 时 
闻 ， 则 将 结束 时 间 设 置 为 开始 时 间 回 后 推移 一 个 小 时 。 日 程 开始 时 间 的 
限制 始终 都 不 能 早 于 当前 时 间 ， 日 程 结束 时 间 的 限制 为 始终 都 不 能 早 于 
日 程 开 始 时 间 。 





代码 清单 9-2 ”刷新 taskTime 对 象 方法 





getTaskTime:function(task)t{ 
task = task || ©; 
var now = utils,getPageData( ) ,data,curDate 
var dateStr = task.date || now.format('YYYY-MM-DD'); 
var curTask = _fn.getcurTask()||task|| 人 {0}; 
var StartTime = curTask.startTime?curTask.startTime:now.format("HH:mm"); 
var startTimeMoment = moment(dateStr+" "+startTime); 
var endTimeMoment; 
if(curTask.endTime){ 
endTimeMoment = moment(dateStr+" "+curTask.endTime); 
if(!endTimeMoment.isAfter(startTimeMoment)){ 
endTimeMoment = moment(startTimeMoment ); 
endTime = endTimeMoment.add(1,'h').format("HH:mm"); 
}elsef{ 
endTime = curTask.endTime; 


} 

}elsef{ 
endTimeMoment = moment(startTimeMoment); 
endTimeMoment = endTimeMoment.add(1,'h'); 
endTime = endTimeMoment.format("HH:mm"); 


curTask.startTimeMs = startTimeMoment ,Valueof() ， 
curTask .endTimeMs = endTimeMoment ,Valueof( ) ; 
curTask.startTime = StartTime， 
curTask.endTime=endTime; 


var startTimeBeginLimit = now.format("HH:mm"); 
var endTimeBeginLimit = StartTime， 


var taskTime = { 
startTime:startTime, 
endTime:endTime, 
startTimeBeginLimit:startTimeBeginLimit, 
endTimeBeginLimit:endTimeBeginLimit, 
date:datestr 


}; 


return taskTime; 








代码 清单 9-3 是 用 户 点 击 添加 或 者 修改 后 执行 的 代码 ， 这 里 调用 
taskService 的 create 和 update 方 法 去 保存 日 程 数据 ， 保 存 成 功 后 ， 返 回 上 
级 页 面 。 这 里 使 用 了 同步 的 方法 去 保存 日 程 数据 ， 是 因为 保存 完成 后 会 
马上 回 到 上 级 页 面 ， 上 级 页 面 会 立即 读 取 storage 中 的 日 程 数据 。 这 样 就 
需要 保证 缓存 中 的 数据 是 包含 新 添加 的 日 程 数 据 的 。 如 果 采 用 异步 的 方 














式 ， 是 无 法 保证 这 点 的 ， 导 致 首页 或 者 日 程 管 理 页 上 将 看 不 到 这 条 新 
加 的 日 程 数 据 。 





代码 清单 9-3 保存 日 程 事 件 / 修 改 日 程 事件 





saveTask:function(e){ 
var task = _fn.getCcurTask(); 
taskService.creat(task); 
wx.navigateBack({ 
delta:1 


了 


updateTask:function(e){ 
var taskKey = e.target.dataset.taskkey; 
var task = _fn.getcurTask(); 
taskService.update({ 
key:taskkey, 
val:task 
}); | 
wx.navigateBack({ 
delta:1 
}); 








代码 清单 9-4 是 在 service.js 中 的 保存 日 程 代码 。 这 上 段 代 码 可 以 分 成 三 
个 部 分 ， 第 一 个 部 分 是 获取 date 对 象 ， 第 二 个 部 分 是 保存 日 程 对 象 ， 第 
三 个 部 分 是 向 日 期 对 象 添加 日 程 对 象 。 下 边 介 绍 这 三 个 部 分 中 涉及 的 具 
体 代码 逻辑 。 














代码 清单 9-4 保存 日 程 





creat :function(task){ 

// 第 一 部 分 获取 时 间 对 象 

var ms = task,startTimeMs;// 始 时 间 的 毫秒 值 

// 读 取 该 毫秒 对 应 缓存 的 日 期 对 象 

var date = dateService.get({ms:ms}); 

Var datekey; 

if(!date){// 绥 存 无 日 期 对 象 则 创建 
dateKkey = dateService.create({ms:ms}); 
date = dateService.get({key:datekey}); 

}elsef{ 
datekey = date,.key; 























师 





















































// 第 二 部 分 : 保存 日 程 对 象 
var taskkey = taskService.getTaskKey(moment().valueof()); 
task.key = taskkey; 
wxService.setStorage({ 
key:taskkey, 
val:task 


}); 
// 第 三 个 部 分 ， 向 日 期 对 象 添加 日 程 对 象 
date.taskkKeys = date.taskkKkeys || [J]; 
date.taskKeys .push(taskkey); 
dateService.update({ 

key:datekey, 

val:date 


}); 


















































在 第 一 部 分 中 ， 需 要 获取 storage 中 日 期 对 象 的 key 值 ， 日 期 对 象 的 
key 值 规定 : 以 date 开头， 以 某 日 期 零 时 的 毫秒 值 作为 结尾 。 在 代码 清 
单 9-4 中 ， 通 过 参数 中 的 毫秒 值 ， 得 到 对 应 的 moment 对 象 ， 又 通过 
moment 对 象 的 startOf 方 法 ， 得 到 对 应 日 期 零 时 的 毫秒 值 。 保 存 日 期 时 获 
取 key 值 ， 也 是 通过 这 个 方法 得 到 一 个 key 之 后 使 用 这 个 key 保 存 日 期 对 
象 的 。 只 要 保证 保存 时 和 读 取 时 ， 传 入 该 方法 的 毫秒 值 在 同一 天 ， 就 可 
以 得 到 相同 的 key 值 ， 如 下 代码 所 示 。 








getDateKey:function(ms){ 
var datekey = 'date_'+moment(ms).startof('day').valueof(); 
return dateKey ; 


} 





在 第 二 部 分 中 ， 需 要 生成 日 程 的 key， es 以 
task_ 开头 ， 以 创建 时 间 的 毫秒 值 作为 结 过 这 个 方法 ， 就 可 以 保证 
日 程 对 象 在 storage 中 的 唯一 性 ， 如 下 所 示 : 





getTaskKey:function(ms){ 
Var taskkey = 'task_'+ms; 
return taskkey; 





图 9-6 是 date 对 象 和 task 对 象 在 storage 中 存储 的 截图 。 可 
期 对 象 中 有 一 个 列表 对 象 taskKeys。 这 个 对 象 就 是 映射 该 日 


以 及 现 ， 日 
期 下 关联 的 


日 程 对 象 的 。 保 存 日 程 的 第 三 部 分 就 是 将 新 生成 的 日 程 对 象 的 key 值 添 


加 到 该 对 象 中 。 


logs Array [1482047145071, 1432040555086, 1481955425927, 1481945383546, 1481945360555, 1481943570851 1481942427110] 
dote 1481904000000 {lesy": “dats_1481904000000", "taskXeys" ["task_1481042451720", "tazk_14619424E40E0" "tak 1461042493339", "task_1431942503220", “tasls_1481042512584", "task_L48194252718 


task_1481942451729 title". 可 务 L Tinportant” 一般", “date"; "2010-12-17", stertTimels :1461842400000, “endTimeWs":1491345000000. “startTine” “0 40", "endlTine 


e" 1491004000000, "eraTime" :14E1990398 


,status": "finish"} 


task_1481942454050 0 2 "jnportant” 一般- “date" "2016-12-171", “startTimels" 146154240DDD0 ”endTimeWs” 1451945nn00n0, “startTine” “I0 407 “anirina “1) 407 key” “14sk_1481942464060", “status” “finish"} 


“andtine” 


task 1481942486839 ttla”“ 测 斌 任 姑 85 “inport snt， 一般“date -2016-12-177 “startTimeNs :145155EEECCOD, ”andTimels” 1451950450000 “startTina” "14 4 


task 1481942503220 {title": 全 5" inportanti” 一般，date“ “2016-12-17", "stertTimcNe": IE1CEACEC000, “endTimaglc :14B1937S3000D “=tartTine": "lB 41", "andfine” 


task_1481942512584 [itLs”… 测 | 这 任务 4 inpozrtant 一般 date 2016-12-17 "startTimels":14019424EC000, “endTimalls":1431943030000 ”startTine :10:417 “endTrins | 


task_1481942527187 TtitlLay “ 测 这 任务 37 “inportant”" 一般“, “date” “2016-12-17", "star tTimes". 14015424600C0, “endTimels" :1451340030000, “startTina": "10 41" “entine” 


图 9-6 storage 中 的 date 对 象 和 task 对 象 





“15: 41”, "key” “tark_1481942456836"} 
TA1", “koy” task_1481942503220°} 


#41", key” "task 1401942512584"} 


LL.41", ‘key” "task 1401942527107"} 


9.3.2 首页 


首页 的 内 容 可 以 分 为 三 个 区 域 ， 日 期 区 域 、 月 历 区 域 和 日 程 区 域 。 
图 9-7 是 首页 的 数据 模型 ， 下 面 对 其 中 的 重要 字段 作 解 释 : 





:calendar: 演 染 当月 日 历 的 字段 。 这 个 字段 保存 了 一 个 星期 维度 和 
日 期 维度 的 二 维 数组 。 


days: 显示 星期 几 的 映射 字段 。 





groupTask: 日 程 区 域 的 泻 染 字 上段。 日 程 区 域 会 将 当日 的 日 程 分 成 
三 个 部 分 ， 未 完成 的 日 程 ， 完 成 的 日 程 和 未 开始 的 日 程 。 


selectDate: 日 期 区 域 的 演 染 字段 。 每 次 用 户 选 择 月 历 区 域 的 日 期 
时 ， 都 会 刷新 这 个 字段 的 数据 。 


“《 了 Object {_nmebviewId : 98，now: 1482878324451, days: Array[7], calLendar: Array[5], seLlectDate: Object.} 加 
_webviewId :0 
vcalendar: Array[5] 
P90: Object 
> 1: Object 
Pb 2: Object 
= 3: Object 
4: Object 
leneth: 5 
> __proto_: Array[9] 
vdays: Array[7] 
98; 


EE 


1 
2 
3， 
4: 
5 
6 
1 


ength: 7 
>__proto_: Array[9] 
groupTask: Object 
Pp curList: Array[2] 
bfinList: Array[2] 
Pp penList: Array[2] 
> _proto_: Object 
now: 1482979324451 
YY selectDate: Object 
date: 19 
isSelect: true 
isToday: false 
key: "2916-12-19” 
month: 11 
ms: 1482076866660 
weekDay: 1 
year: 2916 
> _proto _: Object 
Pp_proto_: Object 





图 9-7 ”页 面 模 型 数据 


代码 清单 9-5 是 首页 加 载 的 代码 ， 这 上 段 代码 的 主要 逻辑 是 初始 化 页 
面 数据 模型 中 的 字段 。 这 里 调用 了 小 程序 的 两 个 生命 周期 函数 : onLoad 
和 onShow 方 法 。onLoad 方 法 只 会 被 调用 一 次 ， 所 以 这 段 代 码 只 加 载 了 
日 历 和 当天 的 日 期 数据 。onShow 方 法 会 在 每 次 进入 这 个 页 面 时 被 调 
用 。 当 该 页 面 是 从 日 程 管理 页 或 者 日 程 详 情 页 回来 时 ， 当 天 的 日 程 数 据 
有 可 能 发 生变 化 ， 为 了 与 storage 中 的 日 程 数据 同步 ， 需 要 每 次 进入 页 重 
新 读 取 并 生成 groupTask 字 段 ，onShow 中 的 _fn.init 方 法 就 是 执行 这 个 过 











程 的 。 


代码 清单 9-5 页面 加 载 





onLoad: function () { 
// WxService.clearStorage(); 
_fn.getCurPage().setData({ 
now:new Date().getTime(), 
days:constant.calendar.dayShort, 
calendar:calendar .getCalendarData( 'm' )， 
selectDate:calendar .getToday() 


}); 


onshow: function( ){ 
_fn.init(); 








代码 清单 9-6 是 获取 页 面 模 型 groupTask 的 字段 。 由 于 首页 的 日 程 区 
域 只 会 显示 当天 的 日 程 ， 所 以 只 需 传递 当天 一 个 坚 秒 值 。 在 获取 到 当天 
的 日 程 列表 后 ， 将 这 个 日 程 列表 按照 其 状态 分 成 三 个 列表 ， 分 别 为 未 开 
始 、 未 完成 和 已 完成 。 然 后 将 未 开始 的 日 程 按照 开始 时 间 升 序 排 列 ， 未 
完成 的 日 程 按照 结束 时 间 的 升序 排列 ， 已 结束 的 日 程 按照 结束 时 间 的 降 
序 排列 。 











代码 清单 9-6 获取 演 染 日 程 区 数据 





groupTask:function(){ 

var ms = new Date().getTime(); 

taskService.getDayTasks({ms:ms},function(taskList){ 

var penList = taskService.filterTaskByStatus(taskList,constant.taskStatus.pendir 

var curList = taskService.filterTaskByStatus(taskList,constant.taskStatus.currer 
var finList = taskService.filterTaskByStatus(taskList,constant.taskStatus.finist 
penList = taskService.orderTaskByStartTime(penList,constant.orderType.asc); 
curList = taskService.orderTaskByEndTime(curList,constant.orderType.asc); 
finList = taskService.orderTaskByEndTime(finList,constant.orderType.desc); 


var groupTask = { 
penList:penList, 
curList:curList, 
finList:finList 


_fn.getcurPage() .setData({ 
groupTask:groupTask 
}); 
外 








代码 清单 9-7 是 获取 某 日 期 日 程 数 据 的 方法 ， ea 
的 taskService 对 象 内 部 。 这 个 方法 是 一 个 公共 服务 ， 主 要 实现 了 通 
个 坚 秒 值 获取 该 曼 秒 对 应 日 期 内 用 户 创 建 的 日 程 ， 同 时 该 方法 提供 了 同 
步 方式 调用 和 有 异步 方式 调用 ， 区 别 在 于 是 否 传递 了 callBack 参 数 。 方 法 
首先 根据 曼 秒 读 取 storage 中 的 日 期 对 象 ， 接 着 过 有 历 该 对 象 中 的 taskKeys 
数组 从 而 得 到 该 日 期 下 的 所 有 日 程 key， 然 后 通过 同步 的 方式 得 到 日 程 
对 象 并 将 其 保存 在 一 个 列表 中 。 























代码 清单 9-7 ”获取 某 日 期 的 日 程 数 据 





getDayTasks:function(option,callBack){ 
var ms = option.ms; 
var getTasks = function(date){// 根 据 日 期 对 象 中 的 taskKeys 对 象 获取 日 程 对 象 
var taskKeyList = date.taskKeys||[]; 
Var taskList = []; 
for(var i = 0 ; i < taskKeyList. length ; i++) 
taskList.push(taskService.get({key:taskkeyList[i]})); 









































if(callBack && typeof callBack==='function'){ 
callBack(taskList); 

}elsef{ 
return taskList 

} 


}; 

if(callBack && typeof callBack==='function' ){// 异 步 
dateservice.get({ms:ms},function(result){// 从 storage 中 得 到 ms 对 应 日 期 对 象 

getTasks(result);// 

















}); 

}elsef{ 
var taskList = dateService.get();// 同 步 
return getTasks(taskList ) ， 


代码 清单 9-8 是 根据 日 程 状态 过 滤 日 程 列表 的 代码 ， 这 个 方法 位 于 
Service.js 的 taskService 对 象 内 部 。 为 了 方便 用 户 了 解 当日 日 程 的 进展 程 
度 ， 在 系统 内 部 为 日 程 定义 了 三 个 状态 ， 分 别 为 未 开始 、 未 结束 和 已 结 
束 ， 定 义 位 于 constant.js 内 部 。 该 方法 通过 调用 js 的 数组 原生 方法 
Array.filter 去 过 滤 参 数 taskList。 己 结束 的 日 程 是 在 日 程 对 象 上 添加 
status=finish 来 实现 的 。 未 开始 和 未 结束 的 日 程 则 是 根据 当前 时 间 与 日 程 
开始 时 间 的 前 后 关系 来 决定 ， 在 代码 中 这 个 判断 是 借助 momentjs 的 
isBefore 方 法 和 isAfter 方 法 来 实现 的 。 








代码 清单 9-8 根据 日 程 状态 过 滤 日 程 列表 





filterTaskByStatus:function(taskList, status){ 
var returnList = taskList,; 
returnList = taskList,.filter(function(a) 攻 
var momentStart = moment(a.startTimeMs);// 日 程 开始 时 间 的 moment 对 象 
var momentEnd = moment(a.endTimeMs);// { 程 吉 束 时 间 的 moment 对 象 
var now = moment(); 
Var taskStatus = a.status; 
if(constant.taskStatus.pending===status){ 
if(now.isBefore(momentStart)){// 当 前 时 间 早 于 开始 时 间 
return true; 



































}else if(constant.taskStatus.current===status &&taskStatus !== constant.taskStat 
if(now.isAfter (momentStart)){// 当 前 时 间 晚 于 开始 时 间 ， 并 且 用 户 未 标记 日 程 结束 
return true; 























}else if(constant.taskStatus.finish===status){ 
if(taskStatus === constant.taskStatus.finish){// 用 户 标记 日 程 结 束 
return true; 


} 
} 
}); 


return returnList ， 






































代码 清单 9-9 是 计算 日 历数 据 的 代码 。 这 段 代 码 位 于 utils.js 的 
calendar 对 象 中 。 方 法 的 入 口 为 getCalendarData， 获 取 日 历 的 类 型 分 为 按 





周 获取 和 按 月 获取 。 按 周 获取 月 历 的 方法 是 getWeekData， 该 方法 首先 
获取 参数 毫秒 值 对 应 周 的 开始 日 期 和 结束 日 期 ， 使 用 的 方法 是 momentjs 
的 startOf 和 endOf 方 法 ， 同 时 声明 一 个 基准 日 期 为 周 开始 时 间 ， 接 下 来 

便 是 将 这 个 基准 日 期 按 天 相 加 直到 周 结束 日 期 ， 每 次 相 加 后 会 判断 相 加 
后 的 日 期 是 否 为 今天 并 且 将 其 标记 ， 返 回 的 结果 是 一 个 长 度 为 7 的 一 维 
数组 。 按 月 获取 月 历 的 方法 是 getMonthData， 这 个 方法 与 getWeekData 

方法 的 思路 类 似 ， 不 同 的 是 首先 获取 参数 毫秒 值 对 应 月 的 开始 日 期 和 结 
束 日 期 ， 日 期 递增 的 方式 不 是 一 天 而 是 七 天 ， 最 后 递增 到 大 于 或 者 等 于 
月 结束 日 期 ， 最 后 返回 的 数据 是 当月 的 所 有 周 的 数据 。 由 于 月 历数 据 是 
按照 周 去 计算 日 期 ， 所 以 难免 会 包含 不 属于 当月 的 日 期 所 以 在 使 用 月 
历数 据 演 染 页 面 的 时 候 需 要 隐藏 这 些 不 正确 的 日 期 ， 这 里 使 用 了 font- 

size=0 的 方式 去 人 处理， 从 而 减少 了 数据 处 理 和 页 面 演 染 的 难度 。 





























代码 清单 9-9 计算 日 历数 据 











// 获 取 月 历 对 象 的 入 口 函数 
getCalendarData:function (calendarTypey data){ 
var now = data || moment(); 
var calendarData,; 
if(calendarType === 'm' ){// 获 取 一 个 月 的 月 历 
calendarData = calendar. getMonthData(now); 
}else if(calendarType === 'w'){// 获 取 一 个 星期 也 
calendarData = calendar .getweekData(now); 












































} 
return calendarData,; 


/7 获取 一 周 的 月 历 
getweekData: function(time){ 



































Var weekStart = moment(time).startof('week'); 
其 















































var weekEnd = moment(time).endof('week'); 
var loopMoment = weekStart;// 基 准 日 
var process = true; 
var weekDays = []; 
while(process)t{ 
weekDays.push({ 





Year :LoopMoment .year()， 

month:loopMoment ,month( )， 

date:1LoopMoment ,date()， 

weekDay:loopMoment ,weekday( )， 

key:1LoopMoment ,format( "YYYY-MM-DD ' )， 

ms:loopMoment .Valueof()， 
isToday:loopMoment.format('YYYY-MM-DD' )===moment( ) .format('YYYY-MM-DD ' )， 
isSelect:l]loopMoment.format('YYYY-MM-DD' )===moment().format('YYYY-MM-DD') 


}); 
// 如 果 基准 日 期 等 于 或 者 超过 周 结束 日 期 ， 则 停止 循环 ， 否 则 加 一 天 
if(loopMoment.isSame(weekEnd, 'day')||loopMoment.isAfter (weekEnd))t{ 
process=false,; 
}elsef{ 
loopMoment.add(1,'day'); 
} 


return weekDays; 


}, 
// 获 取 一 个 月 的 月 历 
getMonthData:function(time){ 

// 月 开始 日 期 

var monthStart = moment(time).startof('month'); 









































































































































Var monthEny = moment (time). endof ( month ' ); 
var loopMoment = monthStart;// 基 准 日 期 
Var process = true; 
var monthweeks = []; 
while(process)t{ 
// 获 取 一 个 星期 的 数据 
var weeks = calendar.getweekData(loopMoment); 
monthweeks.push({ 
key:loopMoment .format('YYYY-W' ), 
month:loopMoment .month( ), 
weeks:weeks 


}); 

// 将 基准 数据 加 七 天 ， 如 果 等 于 或 者 超过 月 结束 日 期 ， 则 停止 循环 

loopMoment.add(7, "day"); 

if(loopMoment.isSame(monthEnd, 'day')||loopMoment.isAfter (monthEnd)){ 
process = false; 


} 


return monthweeks; 






















































































代码 清单 9-10 是 用 户 点 击 首 页 日 程 时 触发 的 事件 ， 该 方法 位 于 
index.js 的 初始 化 page 对 象 内 部 。 页 面 在 渔 染 日 程 时 ， 会 将 日 程 的 状态 和 
key 值 泻 染 在 节点 上 边 ， 在 用 户 点 击 日 程 时 ， 这 两 个 值 会 随 事 件 参 数 传 
圳 到 本 方法 中 。 这 个 方法 只 会 处 理 状态 为 未 开始 和 未 结束 的 日 程 ， 未 开 
始 的 日 程 点 击 后 会 通过 actionSheet 组 件 弹 出 修改 按钮 ， 未 完成 的 日 程 会 
通过 actionSheet 组 件 弹 出 修改 和 完成 按钮 ， 最 后 ， 不 论 用 户 扣 选 了 那 种 











日 程 或 者 用 户 选 择 actionSheet 中 的 那个 选项 ， 都 是 调用 了 相同 的 回调 函 
数 handleSelectTask 方 法 操作 日 程 ， 通 过 传递 actionSheet 的 返回 值 和 日 程 
的 状态 来 区 分 用 户 的 操作 。 


代码 清单 9-10 ”点 击 日 程 事 件 





selectTask:function(e)t{ 
// 日 程 Key 
var key = e.currentTarget.dataset.key; 
// 日 程 的 当前 条 状态 
var status = e.currentTarget.dataset.status; 
// 未 开始 的 日 程 ， 只 展示 修改 按钮 
if(status === constant.taskStatus.pending){ 
wx.showActionSheet({ 
itemList:[" 修 改 "]， 
complete:function(res)t{ 















































if(res.errMsg === 'showActionSheet:ok'){ 
_fn.handleSelectTask(res.tapIndex, status, key); 























} 
}); 攻 
// 已 开始 的 日 程 : 展示 修改 和 完成 按钮 
}else if(status === constant.taskStatus.current){ 


wx.showActionSheet({ 
itemList:[" 修 改 ", "完成 "]， 
complete:function(res)t{ 
if(res.errMsg === 'showActionSheet:ok'){ 
_fn.handleSelectTask(res.tapIndex, status, key); 





代码 清单 9-11 是 操作 日 程 的 代码 ， 在 这 段 代码 中 一 共 涉 及 两 个 功 
能 ， 一 个 是 去 日 程 详情 页 修改 日 程 数 据 ， 另 外 一 个 是 将 用 户 选 定 的 日 程 
状态 设置 为 完成 。 去 日 程 详 情 页 是 通过 方法 fn.goUpdateTask 实 现 的 ， 
逻辑 是 拼接 日 程 详情 页 的 链接 并 设置 参数 pageType=update 和 key 为 用 户 
选择 的 日 程 Kkey。 设 置 选 定 日 程 状态 未 完成 的 逻辑 是 ， 先 从 页 面 模型 的 
groupTask 对 象 中 读 取 未 完成 日 程 列表 并 从 列表 中 得 到 用 户 选 定 的 日 








程 ， 将 该 日 程 的 status 设 置 为 finish， 将 修改 后 的 日 程 对 象 保存 到 storage 
中 ， 最 后 调用 _fn.init 方 法 ， 同 步 storage 中 当天 的 日 程 数据 。 


代码 清单 9-11 操作 日 程 





handleSelectTask:function(selectIdx,status, key){ 
// 未 开始 的 日 程 
if(status === Constant ,taskStatus ,pending){ 
if(selectIdx===0){// 去 日 程 详 情 页 
_fn.goUpdaeTask(key); 


} 
// 未 结束 的 日 程 
}else if(status === constant.taskStatus.current){ 
if(selectIdx===0){// 去 日 程 详情 页 
_fn.goUpdateTask(Kkey); 
}else if(selectIdx===1){// 修 改 程 状态 为 完成 
var taskList = _fn. a data.groupTask.curList; 
// 从 groupTask 对 象 中 获取 用 户 选 定 日 
var task = taskList. CE Tune ona 
return a.key === key; 
})[0]; 
task.status='finish';// 修 改 状态 
// 更 新 storage 
taskService.update({ 
key :key, 
val:task 


}); 

// 重 新 读 取 当天 的 日 程 数 据 
_f 

} 














































































































n.init(); 


} 
}, 


9.3.3 “日 程 管理 页 





日 程 管理 页 分 为 两 个 部 分 : 月 历 部 分 和 日 程 表 部 分 。 图 9-8 是 日 程 
管理 页 的 数据 模型 ， 下 面 对 其 中 的 重要 字段 作 解释 : 





:calendar: 与 首页 的 calendar 字 段 功能 相似 ， 用 来 泻 染 页 头 的 日 历 组 
件 。 


curDate: 当前 页 面 默认 选择 的 日 期 。 





-grid: 用 来 泻 染 日 程 表格 的 数据 对 象 。 这 个 对 象 是 一 个 二 维 数组 。 
数组 的 横 轴 表示 表格 的 一 列 ， 每 一 列 的 长 度 都 是 25， 表 示 一 天 的 24 个 小 
时 。 在 这 个 数组 中 ， 有 的 元 素 为 0， 表 示 表 格 中 的 这 个 格子 为 空 ， 有 的 
元 素 是 一 个 对 象 ， 表 示 表 格 中 的 这 个 格子 是 有 日 程 的 ， 需 要 泻 染 背 景 
色 ， 这 个 对 象 就 是 storage 中 的 日 程 对 象 。 二 维 数组 的 纵 轴 表 示 表 格 的 列 
数 。 表 格 的 列 数 是 根据 选 定 日 期 日 程 的 开始 结束 时 间 综 合计 算得 来 的 。 








-timeLine: 用 于 生成 24 个 小 时 的 时 间 线 数据 。 


vcalendar: Array[7] 
98: Object 
> 1: Object 
> 2: Object 
Pb 3: Object 
4: Object 
> 5: Object 
b 6: Object 
length: 7 
Pp __proto__: Array[9] 
> curDate: Moment 
vgrid: Array[4] 
v9: Array[25] 
:0 


DDNepwmhpwh .=D 


~ 
DaonAamhawNh .人 ® 
国 国 回国 回国 国 回 回回 回避 


21: 
> 22: Object 
> 23: Object 
24: 6 
length: 25 
> _proto_: Array[9] 
1: Array[25] 
2: Array[25] 
3: Array[25] 
length: 4 
>_proto_: Array[9] 
bp timeLine: Array[25] 





图 9-8 页 面 数 据 模 型 





代码 清单 9-12 是 日 程 管理 页 加 载 的 代码 ， 与 首页 相同 ， 本 页 面 也 调 
用 了 小 程序 的 两 个 生命 周期 函数 : onLoad 和 onShow 方 法 。onLoad 方 法 
只 会 被 调用 一 次 ， 用 来 初始 化 日 历 和 默认 日 期 数据 。onShow 方 法 会 在 
每 次 进入 这 个 页 面 时 被 调用 。 日 程 详情 页 回来 时 同步 storage 中 的 选 定 日 
期 的 日 程 数 据 。 








代码 清单 9-12 页面 加 载 


onShow:function(){ 
_fn.init() 


素 
onLoad :function(param){ 
var ms = param.ms || new Date().getTime()， 
_fn.getCurPage().data.curDate = moment(ms，X')， 
_fn.getcalendar(); 
也 





代码 清单 9-13 是 初始 化 日 程 表格 数据 的 代码 ， 在 取得 日 程 列 表 后 ， 
调用 了 getTaskGrid 方 法 。 该 方法 首先 初始 化 了 一 个 只 有 一 个 空 列 的 表格 
数据 。 之 后 就 是 将 日 程 列 表 中 的 日 程 数据 添加 到 表格 数据 中 ， 这 里 对 每 
个 日 程 都 采用 从 左 到 石 轮 询 日 程 表格 的 方式 ， 检 查 当 前 日 程 是 否 可 以 添 
加 到 被 轮 询 的 列 。 如 果 可 以 则 将 其 添加 ， 不 可 以 则 继续 轮 询 ， 如 果 最 后 
还 是 不 存在 可 以 存放 的 列 ， 则 创建 一 个 新 列 去 存放 。 代 码 中 有 两 个 重要 
的 变量 : process 和 lineIdx，process 用 来 标记 古 舍 继续 循环， 只 有 妆 程 订 
为 当前 日 程 找到 可 以 存放 的 列 后 ， 该 值 就 会 变 为 false 从 而 终止 while 循 























环 。lineIdx 是 指 每 次 while 循 环 中 ， 用 于 轮 询 列 的 编号 。 最 后 日 程 表格 的 
数据 格式 融 是 一 个 二 维 数 组 。 


代码 清单 9-13 ”生成 日 程 表格 





init:function(){ 
var moment = _fn.getCurPage().data.curDate || moment(); 
_fn.getTasks(moment,function(taskList){ 
_fn.getTaskGrid(taskList); 


过 


getTaskGrid: 人 

// 默 认 表格 数据 ， 只 有 一 列 全 部 为 0 

Var grid = [16, 0, 0, 9, 0, 0, 0, 0, 9, 0, 9, 0, 9, 0, 9, 0, 0, 0, 0, 0, 0, 9, 0, 

for(var i = 0 ; i < taskList,.]length ; I++){ 

var task = ed 

var process = tr 

var lineIdx = 0; /7 当前 遍历 的 列 序号 

while(process)t{ 
if(!1grid[lineIdx]){// 如 果 列 不 存在 则 创建 

grid[lineIdx]=[0, 0, 0, 90, 0, 909, 0, 090, 0, 0, 90, 0, 9, 0, 90, 0, 0, 90, 0, 0, 0, 
































var line = grid[lineIdx]; 
// 将 日 程 添加 到 列 中 ， 如 果 成 功 结束 结束 循环 ， 不 成 功 则 增加 列 序 号 ， 继 续 遍历 下 一 列 
var addRes = _fn.addTaskToLink(task,1ine); 


























if(addRes === true){ 
process = false; 
}elsef{ 
lineIdx ++; 
} 
} 








} 

// 将 表格 数据 泻 染 到 页 面 上 
_fn.getCurPage().setData({ 

grid:grid, timeLine:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21, 22,: 


} 




















代码 清单 9-14 是 将 日 程 添加 到 列 的 方法 ， 方 法 的 两 个 参数 task 和 1line 
分 别 是 日 程 数据 和 表格 的 列 数 据 。 由 于 表格 的 每 个 格子 都 代表 了 一 个 小 
时 ， 所 以 首先 需要 读 取 日 程 的 开始 时 间 和 结束 时 间 对 应 的 小 时 数 并 判断 
开始 时 间 和 结束 时 间 是 否 相 同 ， 如 有 果 相 同 ， 页 面 显示 该 日 程 不 会 超过 一 
个 表格 ， 人 否则 会 分 布 在 多 个 连续 的 表格 中 ， 从 而 导致 了 两 种 不 同 的 显示 

















方案 。 第 一 种 显示 方案 使 用 到 了 middlePer 和 startPos 两 个 变量 ， 
middlePer 是 指 日 程 在 表格 中 的 高 度 ，startPos 则 是 日 程 距离 上 边线 的 距 
离 。 第 二 种 显示 方案 则 用 到 了 startPer 和 endPer， 其 分 别 代表 了 日 程 开始 

点 距 表 格 下 边 的 高 度 和 日 程 结束 点 距 表 格 上 边 的 高 度 ， 这 些 高 度 值 是 根 
据 日 程 开始 和 结束 时 间 的 分 钟 值 与 60 的 比值 得 来 的 。 在 计算 完 这 些 样式 
所 需 的 数据 后 ， 开 始 检查 日 程 是 否 可 以 被 添加 到 列 中 。 列 数据 是 一 个 长 
度 为 25 的 数组 ， 数 组 元 素 的 默认 值 为 0， 对 应 的 泻 染 结果 是 一 个 空 表 
格 。 检 查 日 程 是 否 可 以 被 添加 就 是 利用 了 这 个 特性 ， 检 查 日 程 的 开始 小 
时 到 结束 小 时 之 间 对 应 的 列 数 据 是 否 都 为 0， 是 则 表示 可 以 添加 ， 否 则 
则 返回 false， 通 知 调用 函数 该 列 不 可 以 将 日 程 添加 其 中 。 当 判断 该 列 可 
以 添加 日 程 后 ， 将 日 程 数据 ， 样 式 数据 组 成 一 个 对 象 ， 添 加 到 列 数据 
中 ， 并 且 返 回 true， 通 知 调用 函数 成 功 将 日 程 添加 到 列 中 。 











代码 清单 9-14 日 程 添加 到 列 





addTaskToLink:function(task,1ine)t{ 

var startTime = moment(task.startTimeMs); 

var endTime = moment(task.endTimeMs ) ; 

// 日 程 开始 的 小 时 值 

var checkStart = startTime.hour()>=0?startTime.hour():0; 

// 日 程 结束 的 小 时 值 

var checkEnd = 人 

Ga sled 

var start 

7 父 避 刘表 格 的 各 分 比 

var endPer 

// 中 间 占 表 百 分 比 

var middlePer ， 
var StartPos ; 
/ 台 点 与 结束 点 在 同一 个 表格 
if(checkStart === CheckEnd ){ 

StartPos = (1-startTime.minute()/60)*100+'rpx' 

middlePer = ((endTime.minute() - startTime. Me 100+'%' 
}else{// 开 始点 与 结束 点 在 不 同 的 表格 

startPer = (1-startTime.minute()/60)*100+'%',; 

endPer = (endTime.minute()/60)*100+'%"'; 













































































// 如 果 被 检查 列 的 开始 到 结束 的 元 素 中 ， 又 不 是 9 的 元 素 ， 则 该 列 不 能 添加 当前 日 程 
for(var i = checkStart ; i <= checkEnd ; i++){ 
if(line[i]!==0){ 
return false; 


} 


} 

// 将 表格 的 开始 到 结束 元 素 全 部 幅 值 为 日 程 数 据 

for(var j = checkStart ; j <= checkEnd ; j++){ 
var isMiddle = checkStart === checkEnd; 
























































var isStart,isEend; 
if(!isMiddle)t{ 

isStart = j===checkStart; 
isEnd = j===checkEnd; 


} 

line[j] = { 
middlePer:isMiddle?middlePer:null, 
startPos:isMiddle?startPos:null, 
startPer:isStart?startPer :null, 
endPer:isEnd?endPer :null, 

task: task 


}; 


return true; 











代码 清单 9-15 是 演 染 日 程 表格 的 代码 。 日 程 表格 是 一 列 一 列 的 演 染 
完成 ， 上 文 提 到 ， 列 数据 元 系 的 默认 值 是 0， 演 染 出 来 的 是 一 个 空 的 格 
子 ， 如 果 列 元 系 的 值 是 一 个 日 程 对 象 ， 则 疝 格子 中 添加 一 个 有 蜗 度 的 
view 并 用 一 种 颜色 将 其 填充 。 填 充 时 会 涉及 几 个 问题 : 是否 将 表格 填充 
满 ? 如 果 不 满 ， 上 边缘 留 白 多 少 ? 下 边缘 留 白 多 少 ? 表格 不 填充 满 的 情 
况 一 共有 三 种 : 第 一 种 是 日 程 的 开始 时 间 和 结束 时 间 在 同一 个 小 时 内 ， 
即 整 个 日 程 演 染 在 同一 个 格子 内 ， 日 程 的 上 下 方 都 需要 留 白 。 这 时 泻 染 
该 格子 的 数据 中 会 包含 middlePer 字 段 作 为 填充 view 的 高 度 和 startPos 字 
段 作 为 填充 view 的 上 边 距 。 夯 外 两 种 情况 是 在 日 程 泻 染 多 于 一 个 格子 的 
时 候 ， 日 程 的 开始 位 置 需要 上 方 留 白 和 日 程 的 结束 位 置 下 方 需要 留 日 。 
这 时 泻 染 该 格子 的 数据 中 包含 了 startPer 字 段 或 者 endPer 字 段 ， 这 两 个 字 
段 都 表示 填充 view 的 高 度 ， 但 前 者 要 求 填充 view 靠 确 部 展示 ， 后 者 了 要求 





填充 view 靠 项 部 展示 。 


代码 清单 9-15” 演 染 日 程 表格 





<view class="dayTaskWrapper"> 
<block wx:for="{{grid}}" wx:for-item="gridItem" wx:for-index="gridIdx"> 
<view class="task-column"> 
<block wx:for="{{gridItem}}" wx:for-index="blockIdx"> 
<view class="task-block taskTable-block" bindtap="chooseTime"> 
<block wx:if="{{gridItem[blockIdx]!=0}}"> 
<view data-taskKey="{{gridItem[blockIdx].task.key}}" class="task {{9grid] 
</block> 
</view> 
</block> 
</view> 
</block> 
</view> 











代码 清单 9-16 是 选择 日 期 事件 的 代码 。 这 段 代码 是 在 用 户 点 击 上 方 
月 历 后 和 触及， 主要 过 辑 是 高 亮 被 点 钟 的 日 期 ， 同 是 从 storage 中 读 取 该 日 
期 用 户 保存 的 日 程 数 据 并 重新 泻 染 下 方 的 日 程 表格 。 





代码 清单 9-16 ”选择 日 期 事件 





chooseDate:function(e) 
var ms = e.currentTarget,.dataset.ms; 
_fn.getCurPage().data.curDate = moment(ms,'x'); 
ye calendar = _fn.getCurPage().data.calendar; 
其 


党 被 选中 | 
































A i=0 ;1i< calendar,.length ; i++){ 
if(calendar[i].ms === ms*1)f{ 
calendar[i].isSelect = true; 

}elsef{ 


calendar[i].isSelect = false; 


_fn. getCurPage() . setData({calendar:calendar}); 
// 重 新 获取 日 程 数 据 
_fn.init(); 


























代码 清单 9-17 是 选择 日 程 的 代码 。 用 户 在 日 程 表格 中 点 选 日 程 后 ， 








会 根据 日 程 的 状态 在 页 面 底部 弹出 译 层 ， 浮 层 展示 日 程 的 基本 详情 以 及 
修改 或 者 完成 的 操作 。 


代码 清单 9-17 选择 日 程 





chooseTask:function(e){ 
var key = e,target,dataset,taskkey 
If(!key){ 
_fn.hideDetailPop(); 
}elsef{ 
if(_fn.getCurPage().data.selectTask && _fn.getCurPage().data.selectTask.key===kt 
return; 


} 
taskService.get({key:key},function(res)t{ 
res.data.curStatus = taskService.getStatus(res.data); 
_fn.getCurPage().setData({ 

selectTask:res.data, 


_fn. showDetailpop(); 


. 





下 面 是 跳 转 日 程 详情 页 的 代码 ， 在 本 页 跳 转 日 程 详情 页 创建 日 程 与 
首页 路 转 该 页 面 创建 日 程 多 传递 了 一 个 需要 创建 日 期 的 室 秒 值 。 达 到 日 
程 详情 页 可 以 根据 用 户 需 要 创建 不 同日 期 的 日 程 : 





代码 清单 9-18” 跳 转 日 程 详情 页 





addTask:function(e){ 


var ms = _fn.getCurPage().data.curDate.valueof(); 
wx.navigateTo({ 

url:'../create/create?pageType=create&ms='+ms 
}); 


} 





94 放生 


本 章 案 例 项 目的 难点 有 两 个 : 


1) 设计 和 使 用 较为 复杂 的 缓存 ， 在 日 程 表 App 的 storage 中 保存 日 期 
数据 和 日 程 数 据 ， 这 两 个 数据 的 关系 是 一 对 多 。 在 代码 结构 设计 时 ， 将 
代码 分 成 了 数据 操作 层 和 业务 层 。 数 据 操作 层 需 要 考虑 同业 务 层 提 供 同 
步 和 异步 的 方式 读 写 数据 的 接口 。 业 务 层 则 只 需 专 心 搞 好 页 面 泻 染 和 用 
户 交 互 即 可 。 














2) 将 复杂 的 界面 数据 模型 化 : 日 程 操作 页 的 日 程 表格 是 一 个 泻 染 
逻辑 比较 复杂 的 组 件 。 业 务 的 目的 是 形象 地 查看 每 个 日 程 的 时 间 长 度 。 
设计 时 就 需要 将 这 个 业务 抽象 成 为 一 个 表格 ， 之 后 思考 表格 中 的 每 个 格 
子 怎么 泻 染 ， 最 后 设计 这 染 数 据 ， 保 证 以 最 简单 的 方式 达到 业务 的 需 





第 10 草 ” 守 例 分 析 一 一 多 点 商城 


本 章 以 多 点 App 为 原型 ， 实 现 一 套 类 似 电 商 的 小 程序 ， 多 点 App 是 
一 款 网 上 超市 购物 软件 ， 用 户 下 单 后 可 在 2 小 时 内 送 达 。 本 案例 忽略 后 
台 逻 辑 ， 主 要 实现 多 点 App 核 心 前 端 功 能 ， 其 复杂 度 远 远 高 于 前 儿 个 案 
例 ， 为 了 降低 项 目 耦 合 度 、 提 高 项 目 可 维护 性 、 拓 展 性 ， 我 们 结合 小 程 
序 特 性 对 项 目 进 行 了 相应 的 架构 优化 ， 这 些 知 识 在 前 端 项 目 中 是 通用 
的 ， 大 家 在 学 习 过 程 中 除了 细节 技术 ， 对 前 端 项 目 架构 一 定 要 有 清楚 的 
认识 ， 本 章 将 会 站 在 更 高 的 高 度 剖 析 案 例 ， 构 建 逻辑 代码 中 一 些 细节 我 
们 将 适当 忽略 ， 学 习 过 程 中 可 以 对 比 源码 阅读 ， 源 码 
git: https://github.com/wxapp-book/dmall.git 。 本 案例 没 使 用 ES6 语 法 ， 
运行 源码 时 ， 不 要 勾 选 “开启 ES6 转 ES5” 选 项 ， 避 人 免 未 知 错误 。 

















10.1 前 求人 闸 本 


通常 电 商 网 站 按 类 型 可 以 将 页 面 分 为 2 类 ， 核 心 流程 页 面 和 辅助 功 
能 页 面 ， 如 图 10-1 所 示 。 





图 10-1 电 商 页 面 类 型 


核心 流程 页 面 一 般 按 顺序 包含 : 入 口 页 、 商 详 页 、 购 物 车 、 结 算 
页 、 文 付 页 、 文 付 状态 页 ， 这 几 个 页 面 文 撑 了 电 商 业务 最 核心 的 完整 购 
买 流程 ， 无 论 什 么 形态 的 电 商 网 站 ， 这 几 个 流程 《页面 ) 是 必 不 可 缺 
的 ， 只 是 在 表现 形态 上 略 有 不 同 。 页 面 流 量 从 入 口 页 到 文 付 状态 页 呈 漏 
斗 状态 ， 所 有 的 电 丙 公司 都 致力 于 提高 漏斗 转化 率 ， 提 高 文 付 成 功 的 用 
户 数量 。 在 不 同 的 电 商 App 中 ， 这 些 页 面 的 表现 形式 也 不 同 ， 如 购物 车 
页 面 ， 在 大 部 分 App 中 通常 形态 是 一 个 蛙 独 的 页 面 ， 而 在 个 别 App 中 购 
物 车 也 可 能 是 一 个 弹 层 。 核 心 流程 常见 页 面 有 : 














-入口 页 : 入 口 页 一 般 是 承接 主流 量 、 用 户 第 一 时 间接 触 的 页 面 ， 
对 性 能 、 打 开 速 度 要 求 都 比较 高 ， 电 商 App 的 首页 、 活 动 页 都 属于 入 口 
页 ， 甚 至 有 时 在 朋友 疾 中 直接 分 享 的 商 详 页 也 属于 入 口 页 。 入 口 页 商品 
形态 都 比较 丰富 ， 经 常 变化 ， 基 于 这 些 特性 ， 入 口 页 通常 都 是 灵活 可 配 
的 。 




















了 商 详 页 : 商 详 页 主要 展示 商品 详情 ， 也 是 访问 量 比 较 高 的 页 面 ， 
商 详 页 服务 端 通 常会 把 一 些 常 变 的 信息 ， 如 现价 格 、 库 存 、 促 销 、 推 荐 
等 信息 单独 剥离 出 来 ， 每 次 进入 页 面 都 请 求 ， 保 证 数据 的 及 时 性 ， 而 一 
些 不 常 变 的 信息 ， 如 主 图 、 商 品名 称 、 原 价 、 参 数 规格 、 商 品 介绍 等 信 
县 静态 化 ， 每 次 请 求 直 接 返回 缓存 中 数据 ， 当 然 ， 针 对 这 些 不 癌变 的 信 
恩 ， 前 合 也 可 以 根据 情况 进行 适当 缓存 ， 减 少 后 端 请 求 压 力 。 








-购物 车 : 购物 车 页 面 用 于 存放 用 户 已 添加 的 商品 ， 在 购物 车 中 能 


对 商品 做 简单 的 编辑 ， 如 修改 数量 ， 不 同 的 电 商 形态 对 购物 车 商品 有 不 
同类 型 的 划分 ， 有 些 按 店 铺 划 分 ， 有 些 按 业 务 形 态 划 分 。 





“结算 页 : 结算 页 主要 用 于 用 户 核 实 商品 信息 ， 填 号 收 货 地 址 、 配 
送 方式 、 收 货 时 间 等 ， 除 商品 信息 外 和 购买 有 关 的 其 他 信息 ， 结 算 页 一 
般 不 允许 修改 商品 信息 ， 因 为 在 结算 页 中 ， 后 台 会 根据 用 户 选 择 的 商品 
配合 促销 规则 、 配 送 规则 等 实时 计算 出 文 付 价格 ， 如 果 结 算 商 品 不 断 变 
化 会 给 后 台 造 成 很 大 压力 ， 当 然 有 些 电 商 也 在 尝试 将 购物 车 和 结算 从 交 
互 上 进行 一 定 程度 的 融合 ， 毕 竟 在 电 商 网 站 中 ， 少 一 次 页 面 跳 转 就 会 缩 
短文 付 路 径 ， 提 升 用 户 转 化 率 。 

















文 付 页 : 支付 页 用 于 用 户 选择 支付 方式 ， 它 负责 对 接 上 自己 或 第 3 方 
的 文 付 系统 ， 让 用 户 以 最 便捷 的 方式 完成 文 付 。 





文 付 状态 页 : 支付 状态 页 告知 用 户 当前 支付 结果 ， 同 时 一 些 支 付 
状态 页 也 承担 部 分 引流 工作 。 


辅助 功能 页 面 相对 比较 多 且 没 有 一 个 固定 的 模式 ， 通 常 不 同 的 电 
商 公 司 根据 自身 提供 的 服务 创建 不 同 的 辅助 功能 页 面 ， 而 这 些 辅 助 功能 
页 面 提 供 的 服务 恰恰 是 每 个 电 商 App 差 异化 所 在 ， 如 一 些 O020 电 商 网 
站 ， 地 址 是 很 核心 的 一 个 系统 ， 进 入 App 首 先 必 须 定 位 ， 然 后 根据 定位 
信息 获取 周边 服务 ， 而 一 些 B2C 电 丙 App 对 地 址 则 不 是 太 强 化 ， 只 有 在 
下 单 时 才 会 让 用 户 填 写 地 址 ， 这 两 种 方式 各 有 优 劣 ， 总 之 ， 辅 助 功能 页 











面 和 电 商 公司 上 自身 业务 、 形 态 上 县 县 相关 ， 它 们 的 存在 是 为 了 结合 业务 更 
好 地 让 用 户 完 成 核心 购买 流程 ， 提 高 漏斗 转化 率 。 辅 助 功能 页 面 按 类 型 
划分 有 如 下 几 种 : 


登录 相关 页 面 : 登录 相关 页 面 通常 包含 登录 页 、 注 册页 、 密 码 找 
回 等 功能 性 页 面 ， 它 们 负责 用 户 整 体 登 录 态 创建 与 维护 ， 通 第 一 个 公司 
旗下 产品 会 共用 一 套 登 录 态 ， 如 腾讯 、 淘 宝 ， 甚 至 现在 在 不 同 平台 

录 态 ， 如 QQ、 微 信 、 微 博 的 第 三 方 平台 登录 ， 如 果 一 个 公司 自 
己 维护 用 户 信 息 ， 前 后 站 一 定 要 做 好 安全 方面 的 工作 。 





商品 检索 相关 页 面 ， 一 般 分 类 、 搜 索 部 属于 商品 检索 页 面 ， 
将 商品 按 用 户 更 容易 理解 的 纬度 更 直接 的 呈现 给 用 户 。 


S: 
CC 





-地址 相关 页 面 地 址 相关 页 面包 含 定位 、 地 址 列表 、 地 址 详情 、 
地 址 修改 等 和 地 址 信息 维护 相关 页 面 ， 不 同 的 公司 有 不 同 的 组 织 方式 。 





订单 相关 页 面 : 订单 相关 页 面包 含 ， 订 单列 表 、 订 单 详情 等 页 
面 ， 在 订单 相关 页 面 中 ， 我 们 能 了 解 当前 订单 的 状态 ， 同 时 可 以 对 订单 
进行 相应 的 操作 ， 如 取消 、 再 次 购买 等 ， 订 单 按 类 型 、 状 态 可 被 拆 为 多 
种 形态 ， 如 按 类 型 可 划分 为 : 020 订 单 、B2C 订 单 、 海 淘 订 单 等 ， 按 状 
态 可 划分 为 待 支 付 、 待 收 货 、 已 完成 《历史 订单 ) 等 ， 不 同 的 公司 有 不 
同 的 拆 分 方式 。 


-个 人 中 心 相 关 页 面 : 个 人 中 心 页 面包 含 用 户 信 息 、 权 益 、 会 员 特 





权 等 页 面 ， 不 同 用 户 所 享有 的 权限 、 服 务 是 不 一 样 的， 每 个 公司 所 提供 
的 服务 也 不 一 样 ， 所 以 个 人 中 心 根据 业务 不 同 有 各 种 不 同 的 形态 ， 但 整 
体 上 订单 、 地 址 修改 、 个 人 信息 等 入 口 都 会 放置 在 个 人 中 心 首页 。 


根据 上 述 电 商 第 见 页 面 ， 结 合 多 点 App 业 务 形态 ， 本 章 实例 实现 
了 : 首页 、 活 动 页 、 分 类 页 、 搜 索 页 、 购 物 车 、 结 算 页 、 支 付 页 、 文 付 
状态 页 、 个 人 中 心 页 ， 根 据 交 互 要 求 ， 我 们 使 用 抵 部 导航 将 首页 、 分 
类 、 购 物 车 、 用 户 中 心 整合 为 一 级 页 面 让 用 户 能 直接 触 达 ， 同 时 活动 页 
和 首页 都 通过 楼 层 搭建 的 方式 实现 ，App 部 分 界面 如 图 10-2 所 示 。 
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图 10-2 ”多 点 商城 界面 


10.2 ”技术 架构 





在 豆 办 电 影 实例 中 ， 我 们 为 大 家 展示 了 通用 的 代码 架构 方式 ， 本 项 
目 在 代码 架构 上 和 豆 为 电影 项 目 基本 一 致 ， 具 体 细 节 我 们 就 不 再 效 述 ， 
主要 讲解 一 些 染 构 上 的 差异 与 重点 ， 本 案例 架构 如 图 10-3 所 示 。 











图 10-3 多 点 商城 架构 


10.2.1 主 界 面 架 构 





相 比 豆瓣 电 影 ， 多 点 商城 界面 中 多 了 一 个 views 目 录 ， 这 个 目录 用 
于 存放 主 界面 的 4 个 视图 ， 以 及 搭建 活动 时 所 需 的 楼 层 模 板 。 多 点 商城 
主 界面 参 见 图 10-4， 通 过 底部 导航 实现 跳 转 ， 点 击 底部 导航 分 别 跳 首 
页 、 分 类 、 购 物 车 、 个 人 中 心 ， 虽 然 小 程序 提供 了 tabBar 配 置 ， 但 是 这 
个 tabBar 相 对 比较 简单 不 能 满足 完整 的 业务 需求 ， 如 小 程序 tabBar 边 框 
颜色 只 有 白色 和 黑色 ， 高 度 、 大 小 不 能 控制 ， 同 时 在 交互 中 ， 购 物 车 图 
标 上 需要 显示 目前 购物 车 商品 数量 ， 这 些 都 是 tabBar 无 法 实现 的 ， 所 以 
我 们 决定 实现 一 个 自 定义 tabBar， 并 将 相关 页 面 以 模板 形式 放置 在 views 
中 进行 管理 。 








我 们 自 定 义 tabBar 的 思路 是 通过 fixed 布 局 ， 在 底部 固定 一 个 
<view/>， 通 过 template 实 现 不 同 的 页 面 ， 点 击 不 同 bar 时 ， 调 用 相应 的 页 
面 模板 结合 相应 的 业务 数据 进行 演 染 ， 在 肾 露 数据 接口 时 ， 我 们 定义 了 
统一 的 数据 结构 格式 ， 把 业务 数据 封装 在 data.currentData 中 传递 给 视图 
层 ， 这 样 保证 调用 模板 的 代码 一 致 ， 主 界面 大 致 结构 如 图 10-5 所 示 。 
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图 10-4 多 点 商城 主 界面 


内 容 区 域 


<template/> 





4 
图 10-5” 主 界面 实现 思路 


主 界面 具体 代码 细节 将 在 后 文中 进行 分 析 。 


10.2.2 ”业务 逻辑 层 


在 豆 办 电影 中 我 们 也 创建 了 业务 逻辑 层 ， 但 实例 业务 比较 简单 ， 大 
家 可 能 没 能 感觉 到 业务 逻辑 层 的 必要 性 ， 反 而 影响 了 代码 可 读 性 。 而 在 
多 点 商城 中 ， 由 于 不 同 的 页 面 可 能 会 调用 同一 个 接口 ， 这 时 接口 层 在 解 
耦 代 码 、 减 少 代 码 量 上 都 显得 尤为 重要 。 本 例 中 我 们 创建 了 cart 和 items 
两 个 services，cart 实 现 了 add、get 两 个 方法 。get 方 法 为 主 界面 tabBar、 
商品 详情 提供 购物 车 数量 查询 服务 ; add 方法 为 首页 、 商 品 详情 页 、 分 
类 页 提供 添加 购物 车 服务 ，items 实 现 了 search、getDetail 两 个 方法 ， 
search 为 分 类 、 搜 索 页 提供 商品 查询 服务 ，getDetail 为 商品 详情 页 提供 
获取 商品 详情 服务 。 在 案例 中 ， 我 们 仅仅 做 了 services 层 的 应 用 展示 ， 
并 没有 完全 实现 相关 接口 和 代码 ， 业 务 逻 辑 层 结构 如 图 10-6 所 示 。 











图 10-6 ”业务 逻辑 层 


在 services/cart/cart.js， 由 于 没有 后 台 接 口 ， 我 们 直接 在 本 地 模拟 购 
物 车 数量 ， 代 码 如 “代码 清单 10-1”。 


代码 清单 10-1 业务 轴 辑 层 





var ajax = require( '../../common/ajax/ajax.js' )， 
simularNumber = 12, 
handle; 

handle = { 


// 添加 购物 车 
add : function( storeId, skuId, num, callback ) { 
ajax.query( { 
url : 'https://www.dmall.com', 
param : 
StoreId : storelId, 
skuId : skuId, 
num : num 


}, 
callback : function() { 
// 模拟 递增 购物 车 数量 


++SimularNumber; 
callback( { 
errCode : '0000', 


errMsg ; '", 
data : { 
num : simularNumber 
} 
} ); 
} 
} ) 
}, 


// 获取 购物 数量 
get : function( callback ) { 
ajax.query( { 
Url : 'https://www.dmall.com', 
param : {}, 
callback : function() { 
// 返回 模拟 数据 
callback( { 
errCode : '0000 '， 

















errMsg : '", 
data : { 
num : simularNumber 
} 
} ); 


} 
} ) 
} 
} 


module.exports = handle; 





在 services/items/items.js 中 ，search 方 法 返回 的 数据 是 商品 列表 ， 这 
个 数据 的 本 地 模拟 数据 在 services/items/data.js 中 ，getDetail 则 直接 调用 回 
调 方 法 ， 由 商 详 页 面 模拟 返回 数据 ， 代 码 如 下 : 





var ajax = require( '../../common/ajax/ajax.js' ), 
data = require( 'data.js' )， 
handle; 

handle = { 


search : function( param, callback ) { 
ajax.query( { 
Url : 'https://www.dmall.com', 
param : param, 
callback : function( res ) { 
// 直接 将 返回 数据 透 传 给 上 层 业务 
// 民 业 务 根据 错误 码 判 断 该 进行 如 何 交 互 
callback( data ); 
} 
} ); 
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}, 


getDetail : function( param, callback ) { 
ajax.query( { 


url : 'https://www.dmall.com', 

param : param, 

callback : function( res ) { 
callback( res ); 


} ); 
} 
} 


module.exports = handle; 





在 业务 逻辑 层 中 我 们 除了 提供 业务 接口 ， 也 可 以 对 服务 端 返回 数据 
做 相应 过 小 ， 比 如 后 台 错 误 码 通常 是 有 含义 的 ， 我 们 可 以 跟 进 这 些 制定 
错误 码 ， 将 返回 数据 过 滤 为 上 层 业 务 所 需 的 字段 ， 如 跳 转 链接 、 跳 转 方 
式 、 提 示 信 息 等 ， 这 是 一 种 思路 ， 具 体 实现 没有 统一 规范 ， 大 家 可 根据 
项 目 实际 情况 选择 合适 的 实现 方式 。 





10.2.3 ”代理 网 络 请 求 接口 





客户 问 常 常 需 要 同 后 台 进 行 交互 ， 我 们 在 小 程序 网 络 API 基 础 上 进 
行 了 再 次 封装 ， 实 现 了 一 个 网 络 请 求 的 代理 方法 ， 主 界面 实现 思路 如 图 
10-5 所 示 ， 所 有 网 络 请 求 相 关 方 法 都 封装 在 common/ajax/ajax.js 文 件 中 ， 
这 样 做 的 原因 有 3 点 : 


- 解 奈 底层 代码 。 上 层 业 务 无 需 关 心 异 步 请 求 调用 方式 ， 底 层 可 以 
随时 根据 情况 统一 修改 请 求实 现 方式 。 





针对 目 己 项 目 格 式 化 请 求 、 返 回 参 数 ， 统 一 上 游 业 务 代码 调用 方 
式 ， 当 需要 切换 网 络 请 求实 现 方式 ， 或 添加 一 些 系统 级 别 请 求 参 数 时 ， 
如 用 户 信 息 、 坐 标 信 息 等 ， 我 们 可 以 在 代理 方法 中 实现 。 








“对 网 络 请 求实 现 拦截 。 一 些 系统 级 别 的 错误 码 可 以 在 这 个 代理 层 
做 统一 的 行为 处 理 ， 如 用 户 未 登录 、 未 授权 、 后 台 服 务 宕 机 等 。 











在 前 端 项 目 中 代理 网 络 请 求 十 分 有 必要 ， 在 封装 请 求 参 数 时 ， 我 们 
也 应 该 更 多 考 碟 整个 系统 的 接口 解 奈 ， 在 过 去 网 络 端 后 台 通 党 会 直接 读 
取 cookie 中 茶 些 字段 判断 用 户 登 录 态 ， 而 如 果 一 个 公司 产品 既 有 App 又 
有 H5， 那 么 这 样 的 接口 在 App 中 无 法 使 用 ， 所 以 我 们 建议 将 cookie 或 其 
他 存储 中 的 参数 通过 前 端 取 值 后 赋值 在 请 求 参数 中 进行 统一 管理 ， 这 样 


能 实现 后 台 的 解 厢 ， 无 论 前 台 技 术 怎 样 实现 ， 有 无 cookie， 后 台 接 口 都 
参数 的 封装， 便 可 在 代理 网 络 请 求 接口 中 实 


能 
能 支持 调用 ， 而 这 类 统一 
现 ， 实 现 原理 如 图 10-7 所 示 。 


service 






六 
~ 


尘 
河 
品 


后 台 接 口 后 台 接 口 后 
图 10-7 代理 网 络 请 


common/ajax/ajax.js 文 件 代 人 码 如 下 : 





var handle, 
fn; 


handle = { 

/* 统一 请 求 接口 */ 
query : function( object ) { 
wx.request({ 
url : object.url, 

data : object.param, 
method : 'get', 
success : function( res ) { 





_fn.responseWrapper( res, object.callback ) 
} 
fail : function( res ) { 

_fn.responseWrapper( res, object.callback ); 


} 
}); 
} 
} 


_fn={ 
responseWrapper : Dun res, callback ) { 
// 对 请 求 失败 ， 封 装 统一 返回 数据 格式 
// 保证 上 层 业 务 只 传 入 个 回调 方法 ， 简 化 请 求 API 
if ( !res || res.statusCode != 200 ) { 
callback( { 
errCode : -1, 
errMsg : ' 网 络 问 题 '， 












































return; 


} 


// 一 些 特殊 登录 统一 拦截 ， 如 未 登录 等 情况 
If ( res.data.errCode == 12341234 ) { 
// 跳 转 到 登录 页 


return 














} 

If ( typeof callback == 'function' ) { 

// 正常 回调 ， 过 滤 小 程序 返回 对 象 
callback( res.data ); 

















} 
} 


module.exports = handle; 





业务 层 (services) 调用 请 求 代 码 如 下 ， 传 入 的 回调 方法 只 有 一 


个 : 





handle = { 
search : function( param, callback ) { 
ajax.query( { 

url : 'https://www.dmall.com', 

param : param, 

callback : function( res ) { 
// 直接 将 返回 数据 透 传 给 上 层 业务 
// 民 业 务 根据 错误 码 判 断 该 进行 如 何 交 互 
callback( res ) 


} 
} ); 
} 
} 
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10.2.4 ”本 地 模拟 接口 数据 





自从 Web 项 目 推崇 前 后 端 分 离 以 来 ， 大 大 提高 了 项 目 整体 开发 效 
率 ， 而 小 程序 这 种 开发 模式 默认 就 是 前 后 端 分 离 的 形式 ， 针 对 这 种 前 后 
端 分 离 的 项 目 ， 前 端 开发 通常 会 在 本 地 模拟 一 份 接口 数据 格式 。 当 前 后 
两 端 各 自 调试 完毕 以 后 ， 直 接 修改 services 接 口 ， 去 掉 数 据 注 入 代码 ， 
便 能 直接 对 接 后 台 接 口 ， 大 大 减少 了 前 后 端 开发 过 程 中 不 必要 的 沟通 。 
在 本 案例 中 ， 我 们 基本 将 模拟 数据 data.js 保 存在 页 面目 录 中 ， 如 图 10-8 
所 示 。 这 样 我 们 在 编写 视图 层 和 逻辑 层 代 码 时 ， 可 以 随时 根据 需求 修改 
数据 格式 ， 如 pages/active/data.js，pages/cashier/data.js，views/cart/data.js 
等 ， 当 然 也 可 以 将 这 些 模拟 数据 放置 在 不 同 servcie 目 录 中 ， 大 家 在 开发 
前 端 项 目 过 程 中 ， 一 定 要 尽 可 能 使 用 这 种 本 地 模拟 数据 的 方式 。 
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图 10-8 ”本 地 模拟 接口 数据 


10.2.5 widgets 





widgets 与 common 层 都 是 为 项 目 提供 一 些 公 共 的 资源 ， 不 同 之 处 在 
于 ，widgets 更 多 偏向 一 个 完整 的 UI 组 件 块 ， 比 如 下 拉 选 择 框 、 弹 层 框 、 
搜索 框 等 ，common 通 常 是 一 些 公共 的 方法 集合 ， 没 有 相应 的 UI 层 ， 在 
本 案例 中 ， 我 们 将 分 类 页 和 搜索 页 的 搜索 框 、 商 品 列表 抽象 成 widgets， 
如 图 10-9 所 示 。 








在 小 程序 中 由 于 数据 模型 、 事 件 绑 定 都 是 在 小 程序 页 面 文件 中 进 
行 ， 我 们 虽然 可 以 将 widgets 代 码 文件 进行 物理 隔离 ， 但 真正 对 项 目 进行 
组 件 化 有 一 定 难 度 。 在 本 案例 中 我 们 尝试 了 多 种 剥离 方式 ， 对 于 widgets 
的 剥离 ， 我 们 尝试 仅仅 剥离 UI 层 ， 并 没 对 逻辑 层 进行 剥离 ， 在 列表 页 、 
搜索 页 引入 模板 演 染 时 ， 需 要 传 入 对 应 的 事件 方法 名 称 ， 而 具体 的 事件 
实现 则 是 在 列表 页 、 搜 索 页 自己 的 逻辑 层 中 实现 。 而 且 有 个 细节 需要 注 
意 ， 按 照 交 互 要 求 ， 在 列表 页 中 点 击 搜索 框 时 需要 跳 转 到 搜索 页 ， 在 搜 
索 页 searchbox 失 去 焦点 时 需要 根据 用 户 输入 搜索 商品 ， 所 以 我 们 对 于 这 
两 个 wedgets 仅 仅 做 了 UI 层 的 解 耦 ， 而 实际 项 目 中 是 否 要 采用 这 种 解 耦 
方式 ， 还 需要 根据 实际 项 目 而 定 ， 本 示例 仅 作 展示 。 我 们 以 searchbox 为 
例 ， 代 码 如 下 : 
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图 10-9 wigets 





<template name="search-box"> 
<view class="search-box"> 
<1-- 绑 定 调用 页 面 传 入 的 tapEvent 方 法 名 --> 
<view class="box-cont" bindtap="{{tapEvent}}"> 
<icon class="icon search"/> 
<view class="input" wx:if="{{!showInput}}"> 搜 索 多 点 超市 商品 </view> 
<!-- 绑 定 调用 页 面 传 入 的 blurEvnt 方 法 名 --> 
<input class="input" wx:else auto-focus="{{autoFocus}}" placeholder=" 搜 索 多 点 超 
</view> 
</view> 
</template> 






































在 调用 searchbox 模 板 时 ， 我 们 需要 将 对 应 的 tapEvent、blurEvent 事 
件 通 过 参数 传递 给 模板 ， 达 到 同一 模板 在 不 同 页 面具 备 不 同 交 互 的 间 





果 ， 这 种 方式 更 加 依赖 模板 参数 接口 ， 每 个 调用 页 面 都 必须 实现 对 应 的 
方法 ， 后 面 10.3.2 市 楼 层 搭 建 代码 中 ， 我 们 采用 了 男 外 一 种 方式 ， 读 者 
看 完整 个 案例 后 可 以 对 比 两 种 实现 方式 的 优 劣 。 


10.2.6 ”全 局 样式 控制 


在 项 目 样式 管理 中 ， 我 们 将 一 些 公共 样式 ， 如 icon、 默 认 轮 播 图 、 
系统 样式 复写 剥离 到 common/basestyle/basestyle.wxss 文 件 中 ， 在 
app.wxss 文 件 引 用 basestyle.wxss 文 件 ， 每 个 样式 放置 在 .base-style 类 选择 
器 下 ， 如 以 下 代码 所 示 : 





.base-style .icon.bar { background-image: url(http://static.dmall.com/kayak-project, 





/* tabbar 图 标 */ 

.base-style .icon.bar.home { background-position: 0 0; } 

.base-style .icon.bar.home.current { background-position: © -100rpx; } 
.base-style .icon.bar.sort { background-position : -100rpx 0; } 

.base-style .icon.bar.sort.current { background-position: -100rpx -100rpx; } 
.base-style .icon.bar.cart { background-position: -300rpx 0; } 

.base-style .icon.bar.cart.current { background-position: -300rpx -100rpx; } 
.base-style .icon.bar.mine { background-position : -400rpx 0; } 

.base-style .icon.bar.mine.current { background-position: -400rpx -100rpx; } 














在 使 用 时 需要 在 构建 代码 外 层 添 加 类 选择 器 ， 如 下 所 示 : 





<view class="details base-style"> 
<view class="slider"> 


</view> 

<view class="info"> 

</view> 

<view class="spec info-module"> 
</view> 

<view class="more info-module"> 
</view> 

<view class="toolbar"> 


</view> 
</view> 


采用 这 种 方式 能 将 公共 的 样式 代码 剥离 到 同一 文件 统一 管理 ， 同 时 
在 项 目 整 体 切换 风格 时 ， 我 们 可 以 按 类 似 方法 创建 妃 一 个 样式 文件 履 兰 
原 有 类 选择 需 或 新 建 类 选择 器 ， 修 改 对 应 页 面 的 class 属 性 ， 或 将 页 面 
base-style 封 逆 为 数据 注入 ， 这 样 便 可 做 到 修改 一 处 便 整 体 切换 页 面 风 
格 。 这 种 方式 同时 适用 一 些 系统 换 肤 的 功能 。 





10.3 ”页面 实现 


上 面 讲解 了 多 扣 丙 城 项 目 主要 染 构 和 项 目 中 的 一 些 核心 难点 ， 本 小 
节 讲 解 页 面 实现 过 程 中 一 些 核心 技术 和 思路 ， 如 在 首页 与 活动 页 中 ， 我 
们 使 用 了 楼 层 搭建 的 方式 动态 创建 页 面 ， 在 其 余 一 些 页 面 中 ， 我 们 尝试 
了 多 种 解 看 方式 。 这 些 编码 思路 没有 绝对 的 好 与 不 好 ， 只 有 合适 与 不 合 
适 ， 在 实际 项 目 中 一 定 要 根据 项 目 实际 情况 进行 合理 选择 ， 避 免 过 度 架 
构 。 
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图 10-10” 主 界 面 


这 4 个 页 面 整体 架构 思路 在 技术 架构 中 进行 了 介绍 ， 这 里 主要 介绍 
主 界面 实现 细节 。 主 界面 代码 在 pages/index 目 录 中 ， 首 页 、 分 类 、 购 物 
车 、 个 人 中 心 界面 分 别 单独 剥离 到 views/home、views/sort、views/cart、 
views/mine 目 录 中 ， 在 主 界面 文件 中 我 们 需要 分 别 引 入 4 个 view 对 应 的 
js、wxml、wxss 文 件 ， 在 每 个 view 中 必须 实现 render 方 法 。 在 tab 切 换 时 
会 调用 对 应 view 的 render 方 法 。 要 注意 的 是 ，view 目 录 中 虽然 有 js、 
wxml、WwXss 三 个 文件 ， 但 它 并 不 是 小 程序 页 面 ， 仅 仅 是 按 模 块 化 规则 
将 代码 进行 了 解 契 ， 所 以 view 中 js 是 没有 data 对 象 的 ， 也 不 能 在 页 面 逻 
辑 中 直接 调用 this.setData() 方法 ， 所 以 在 调用 对 应 view 的 render 方 法 
时 ， 我 们 将 当前 页 面 对 象 作为 参数 传递 给 对 应 view 的 render 方 法 。 代 码 
片段 见 代码 清单 10-2。 





代码 清单 10-2 ” 主 界 面 实现 








// 注册 当前 页 面 对 应 js 
Views = { 
home : home, 
sort : sort, 
cart : cart, 
mine : mine 


} 


Page( { 
data : {..} 
onReady : function( ) { 
// 加 载 时 默认 选中 首页 


_fn.selectView.call( this, 'home' ); 


























onshow : function() { 
// 每 次 显示 都 刷新 一 次 购物 车 
// 这 样 保证 在 商 详 添加 后 在 首页 也 能 显示 


Var self = this; 




















serviceCart.get( function( res ) { 
self.setData( { 
'cart.num' : res.data.num 
} ); 
} ); 


也 
// 绑 定 到 视图 层 切 换 tab 页 面 方法 
changeTab : function( e ) { 
var currentTarget = e.currentTarget, 
view = currentTarget.dataset .view; 
If ( !View ) { return; } 
// 调用 对 应 的 view 
_fn.selectView.call( this, view ); 
} 
} ); 


_fn={ 
selectView : function( view ) { 
var view = Views[Vview] 
if ( !View ) { 
return; 



























































} 
// 调用 对 应 的 render 方 法 , 并 将 当前 页 面 作为 参数 传递 给 对 应 模块 
view.render( this ) 











了 





在 每 个 view 中 需要 实现 render 方 法 ，render 方 法 必须 实现 两 个 逻辑 : 
1) 设置 当前 页 面 数 据 currentView 和 currentData， 和 触发 泻 染 ;2) 在 当前 





页 面 对 象 中 绑 定 当前 view 所 需 事件 。 这 样 每 个 view 在 研发 过 程 中 ， 可 以 
单独 在 目录 中 创建 自己 的 模拟 数据 、 事 件 对 象 ， 在 多 人 开发 时 不 用 都 修 
改 imndex.js 文 件 ， 达 到 解 得 目的 。 在 事件 绑 定时 ， 为 了 避免 事件 冲突 ， 事 
件 名 称 是 view 名 + 方法 名 ， 如 sortChangeSort 〈 分 类 view 中 切换 分 类 tab 选 
项 ) 以 分 类 为 例 ， 代 码 见 代码 清单 10-3。 





代码 清单 10-3” 演 染 的 实现 





var handle, events,...,; 
handle = { 
// callerPage 为 jndex Page 对 象 
render : function( callerPage ) { 
// 初始 化 界面 
_fn.init( callerPage ) 


// 设置 搜索 框 数据 























data.data.searchBox = {...} 
// 设置 页 面 所 需 数据 
callerPage.setData( { 

















currentView : 'sort', 
currentData : data.data 
} ); 


// 选中 第 几 个 分 类 tab 
_fn.select( 0, callerPage ); 
} 
}; 


// 需要 绑 定 到 index .js 的 事件 方法 
events = { 
SortChangeSort : function( e ) {...} 
sortGotoSearch : function( e ) {...}, 
sortcClickProxy : function( e ) {...} 


























} 
// 私有 方法 
_fn={ 
init : function( callerPage ) { 
// 如 果 已 经 初始 化 则 不 需要 再 次 触发 ， 避 人 免 事 件 重 复 merge 
if ( callerPage,initedSort ) { 
return 






























































// 将 事件 绑 定 到 Index 页面 逻辑 层 
utils.mix( callerPage，events ); 
callerPage.initedSort = true; 

















}, 

// 选中 对 应 分 类 

select : function( index, callerPage ) {...}, 

// 添加 购物 车 

addCart : function( e, callerPage ) {...} 
} 


module.exports = handle; 














主 界面 泻 染 流程 整体 如 图 10-11 所 示 。 


在 index 模 型 中 ，currentData 永 远 指 向 当前 view 所 对 应 的 数据 模型 ， 
事件 方法 中 ， 可 以 通过 修改 当前 currentData 而 修改 当前 界面 ， 在 开发 过 
程 中 可 以 在 本 地 模拟 sort 数 据 模 型 ， 等 前 后 台 工 作 都 开发 完毕 后 ， 直 接 
对 接 后 台 接 口 。 










cart.wxml mine.wxml 
<template/>| |<template/> 












J 
| Way 
数据 变化 上 
触发 演 染 | ea oss 

index 数据 模型 sort 数据 模型 


index | 


将 index 数据 模型 currentData 属性 指向 
sort 数据 模型 ， 并 调用 setData() 





找到 对 应 view 并 
执行 render 方法 





sort 
render() 








后 台 交 互 本 例 未 实现 


图 10-11 主 界面 泻 染 流程 


10.3.2 ”首页 与 活动 页 


首页 与 活动 页 的 示例 如 图 10-12 所 示 。 





首页 与 活动 页 由 于 第 第 变动 ， 我 们 可 以 通过 搭建 楼 层 方式 实现 。 在 
前 端 项 目 中 这 种 动态 搭建 页 面 的 技术 已 经 十 分 成 熟 ， 本 和 案例 中 楼 层 搭建 
通过 模板 实现 。 每 一 个 楼 层 存放 到 一 个 模板 中 ， 泻 染 时 ， 裔 历数 据 模型 
列表 ， 根 据 每 个 数据 模型 类 型 ， 找 到 对 应 模板 进行 泻 染 ， 本 有 双 例 中 首页 
和 活动 页 部 是 采用 这 种 楼 层 泻 染 方案 ,流程 如 图 10-13 所 示 。 
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图 10-12 ”首页 与 活动 页 
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modules.wxml 





并 排 图 片 模块 
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商品 列表 





home.wxml 


图 10-13 ”首页 泻 染 流程 


所 有 楼 层 模板 类 型 存放 在 views/modules/modules.wxml 文 件 中 ， 每 个 
楼 层 对 应 的 事件 存放 在 views/modulesmodules.js 中 ， 在 演 染 楼 层 页 面 
时 ， 除 了 引入 楼 层 模板 ， 还 需要 将 modules.js 中 的 事件 合并 到 页 面 对 象 
上 。modules.wxml 中 我 们 定义 了 5 类 楼 层 : 轮 揪 图 模块 、 入 口 模块 、 催 
品 列表 模块 、 左 右 混搭 楼 层 模 块 、 并 排 图 片 模块 ， 代 码 整体 结构 如 下 : 











<!-- 轮 播 图 模块 - -> 

<template name="slider"> 
<view class="slider"> 
</view> 

</template> 

<!-- 入 口 模块 - -> 


<template name="entry"> 
<view class="entry"> 





</view> 
</template> 
<!-- 商品 列表 --> 
<template name="module-1"> 
<view class="module-1 flex-col"> 
</view> 
</template> 
<!-- 左右 楼 层 混搭 --> 
<template name="module-2"> 
<view class="module-2 flex-col"> 





</view> 
</template> 
<!-- 并 排 图 片 --> 
<template name="module-3"> 
<view class="module-3 flex-col" style="height:{{data[0].height/data[0] .width*750/c 








</view> 
</template> 








以 首页 为 例 ，modules 数 组 中 对 应 当前 楼 层 的 顺序 ， 每 个 楼 层 包含 
两 个 属性 type 和 data，type 值 为 modules.wxml 中 对 应 楼 层 模板 name 值 ， 
data 为 对 应 模板 所 需 数据 ， 页 面 数据 模型 如 下 : 







































































data : { 

modules : [{ 
// 轮 播 图 模块 
type : 'slider', 
data : [...] 

},4 
// 入 口 模块 
type : 'entry', 
data : [...] 

},4 
// 并 排 图 片 模块 
type : 'module-3', 
data : [...] 

}14 
// 商品 列表 模块 
type : 'module-1', 
data : [...] 


,{ 
// 左右 混搭 楼 层 模块 



































type : 'module-3', 
data : [...] 

}14 
// 并 排 图 片 模块 
type : 'module-3', 
data : [...] 
{ 
// 商品 列表 模块 
type : 'module-1', 
data : [...] 

}] 





根据 这 个 模型 ， 首 页 仅 需 遍 历 modules， 调 用 对 应 模板 进行 泻 染 即 
可 ， 代 码 如 下 : 





<!- - 导入 楼 层 模板 --> 


<import src=",./modules/modules .wxml1l"/> 


<template name="home"> 
<view class="view-home modules"> 




















<!-- 遍历 楼 层 --> 
<block wx:for="{{modules}}"> 
<!-- 调用 对 应 模板 - -> 
<template is="{{item,.type}}" data="{{...item, index}}"></template> 
</block> 
</view> 
</template> 





活动 页 面 实现 和 首页 类 似 ， 唯 一 不 同 的 是 modules 数 据 不 一 样 。 上 
文 代码 仅仅 解决 了 楼 层 视图 层 渔 染 的 问题 ， 在 实现 过 程 中 ， 每 个 楼 层 具 











备 上 自己 的 事件 ， 比 如 商品 列表 中 有 添加 购物 车 事件 ， 为 了 便于 管理 ， 我 
们 将 楼 层 本 身 的 事件 封装 在 modues.js 中 ， 调 动 楼 层 模板 时 ， 需 要 将 楼 层 
对 应 的 方法 合并 到 相应 的 页 面 对 象 中 ， 如 本 案例 modules.js 已 定义 两 个 
事件 : 








var utils = require( '../../common/utils/utils.js' ), 
serviceCart = require( '../../service/cart/cart.js' )， 
events, handle; 


handle = { 
// 楼 层 对 应 事件 
events : 
// 添加 购物 车 
modulesAddCart : function( e ){...}, 
// 轮 播 图 切换 
modulesSliderChange : function( e ){...} 




















} 


module.exports = handle; 








调用 页 面 时 需要 将 事件 添加 到 页 面 对 象 中 : 





// 引入 modules 
var modules = require( '../../views/modules/modules.js' )， 


handle = { 
render : function( callerPage ) { 
_fn.init( callerPage ); 
// 请 求 数据 ， 演 染 数据 
callerPage.setData( { 
currentView : 'home', 
currentData : data.data 


了 





} 
} 


_fn={ 
init : function( callerPage ) { 
if ( callerPage.initedHome ) { 
return; 


} 
// ”将 楼 层 事 件 添加 到 页 面 中 


utils.mix( callerPage, modules.events ); 


























} 


module.exports = handle; 





楼 层 搭 建 的 思路 比较 适合 手机 ， 由 于 屏幕 太 寸 和 使 用 习惯 关系 ， 手 
机 应 用 的 界面 部 可 以 拆 分 为 不 同 楼 层 ， 而 对 于 一 些 大 尺寸 的 设备 (如 
PC、 平 板 ) ， 动 态 搭 建 页 面 时 需要 在 此 引入 栅 格 系统 ， 首 先 将 界面 划 
分 为 不 同 的 格子 ， 然 后 将 模块 放置 到 对 应 的 格子 中 ， 有 兴趣 的 同学 可 以 
深入 研究 。 





10.3.3 天 页 与 搜索 页 


分 类 页 和 搜索 页 的 示例 如 图 10-14 所 示 。 


eee 中 国 移动 全 上 午 12:49 全 88% 】 eeesee 中 国 移动 全 上 午 12:50 
多 点 - 网 上 好 超市 “0 多 点 - 网 上 好 超市 
CQ 多 点 
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图 10-14 分 类 页 和 搜索 页 








分 类 页 和 搜索 页 在 实现 上 本 身 没有 什么 难点 ， 值 得 一 提 的 是 这 两 个 
页 面 中 ， 我 们 答 试 了 妃 一 种 解 耦 方式 。 在 之 前 的 项 目 中 我 们 都 是 把 事件 
方法 放置 在 对 应 js 文件 中 ， 调 用 页 面 时 需要 添加 到 当前 页 面 对 象 中 ， 而 
在 分 类 和 搜索 中 ， 因 为 同一 组 件 在 不 同 页 面 的 行为 不 一 样 ， 如 
searchbox， 在 分 类 页 面 中 按 交 互 要 求 点 击 搜索 框 直接 跳 转 到 搜索 页 ， 在 
搜索 页 反击 搜索 框 是 输入 搜索 关键 词 ， 所 以 我 们 仅仅 将 页 面 视 图 进行 解 
炎 ， 制 定 每 个 组 件 对 应 的 数据 模型 ， 每 个 组 件数 据 模 型 中 包含 了 组 件 相 























应 行为 控制 和 具体 事件 实现 。 以 searchbox 组 件 为 例 ， 组 件 模板 中 我 们 定 
义 了 tapEvent 事 件 ， 代 码 如 下 : 





<template name="search-box"> 
<view class="search-box"> 
<!-- 绑 定 用 户 传 入 的 tapEvent 方 法 名 --> 
<view class="box-cont" bindtap="{{tapEvent}}"> 
<icon class="icon search"/> 
<view class="input" wx:if="{{!sShowInput}}"> 搜 索 多 点 超市 商品 </view> 
<!-- 绑 定 用 户 传 入 的 blurEvent 方 法 名 --> 
<input class="input" wx:else auto-focus="{{autoFocus}}" placeholder=" 搜 索 多 点 超 
</view> 
</view> 
</template> 















































在 调用 时 将 点 击 搜 索 框 具体 事件 名 通过 tapEvent 传 入 给 searchbox， 
分 类 页 面 代码 如 下 : 








handle = { 
// callerPage 为 jndex Page 对 象 
render : function( callerPage ) { 
// 初始 化 界面 
_fn.init( callerPage ) 
// 设置 搜索 框 数据 
data.data,.searchBox = { 
// 设置 tapEvnet 对 应 事件 名 
tapEvent : "SortGotoSearch '， 
// 不 需要 自动 聚焦 
autoFocus : false, 
// 不 显示 输入 框 组 件 
ShowInput : false 


} 
// 设置 页 面 所 需 数据 
callerPage.setData( { 





























currentView : 'sort', 
currentData : data.data 
} ); 
} 
}; 











// 需要 绑 定 到 index .js 的 事件 方法 
events = { 
// searchbox tapEvnet 具 体 方法 实现 
SortChangeSort : function( e ){...}, 
































} 

// 私有 方法 

_fn={ 
init : function( callerPage ) { 














// 将 事件 绑 定 到 index 页 面 对 象 


utils.mix( callerPage，events ) 
}, 
} 


module.exports = handle; 





























在 搜索 页 中 点 击 搜索 框 并 没有 任何 交互 ， 而 是 在 进入 搜索 框 时 ， 
searchbox 需 要 默认 聚焦 ， 在 searchbox 失 焦 时 需要 搜索 商品 ， 所 以 


searchBox 数 据 对 象 实现 代码 如 下 : 





Page( { 
data : { 

searchBox : { 
// 自动 聚焦 
autoFocus : true, 
// 显示 输入 框 组 件 
ShowInput : true, 
// 失 焦 时 触发 搜索 
blurEvent : 'search' 


} 


}, 
// 搜索 方法 具体 实现 
search : function( e ){...} 


} ); 









































通过 上 述 方式 ， 我 们 能 实现 同一 组 件 在 不 同 页 面 实现 不 同 交 互 的 效 
果 ， 这 仅 是 一 种 解 稍 思路 ， 而 在 实际 项 目 中 我 们 得 反思 是 否 有 必要 做 这 
类 解 稍 ， 在 一 些 复 杂 度 不 高 、 代 码 量 较 小 的 页 面 ， 直 接 将 组 件 构建 代码 
写 入 页 面 反 而 效率 更 高 。 











10.3.4 支付 流程 





在 通常 项 目 中 ， 广 付 流程 涉及 结算 页 、 支 付 页 、 支 付 状 态 页 ， 如 图 
10-15 所 示 。 


购物 车 |。 | 结算 页 |。 | 支付 页 





图 10-15 ”普通 支付 流程 








这 几 个 页 面 需 要 做 特殊 的 栈 处 理 ， 通 常 这 几 个 页 面 访问 顺序 为 : 用 
尸首 先 访问 结 算 页 ， 然 后 访问 支付 页 ， 最 后 跳 转 到 支付 状态 页 。 但 是 在 
这 种 流程 中 如 果 用 户 在 文 付 状态 页 点 击 返回 按钮 会 导致 页 面 返回 到 文 付 
页 ， 再 返回 到 结算 页 ， 而 此 时 文 付 页 和 结算 页 对 应 的 订单 已 被 处 理 ， 直 
接 按 这 种 流程 返回 会 叶 致 页 面 报错 ， 甚 至 在 H5 项 目 中 ， 接 入 文 付 宝 之 
类 的 第 3 方 文 付 ， 在 文 付 页 和 支付 状态 页 之 间 有 更 长 的 支付 流程 ， 这 时 
用 户 点 击 “ 返 回 ? 按 钮 时 会 返回 到 之 前 访问 过 的 页 面 。 同 时 在 交互 体验 
上 ， 当 文 付 成 功 后 点 击 “ 返 回 ? 按 钮 ， 应 该 返回 至 首页 或 结算 页 上 一 级 页 
面 ， 所 以 我 们 对 此 流程 进行 了 特殊 处 理 ， 如 图 10-16 所 示 。 











购物 车 





图 10-16 ”优化 后 支付 流程 





在 支付 页 支付 成 功 后 直接 返回 到 结算 页 ， 结 算 页 根据 之 前 生成 的 订 
单 ， 将 当前 页 面 replace 到 文 付 状态 页 ， 文 付 状态 页 根据 文 付 订单 查询 文 
付 结果 并 显示 ， 这 样 ， 当 用 户 在 状态 页 点 击 “ 返 回 ? 按 钮 时 ， 便 能 直接 返 
回 购物 车 。 在 H5 项 目 中 ， 可 以 在 结算 页 跳 转 前 调用 
history.replaceState《〈) 方法 将 当前 栈 直 接 修改 为 文 付 状 态 页 ， 这 样 文 付 
页 支付 成 功 后 束 能 直接 跳 转 到 文 付 状态 页 ， 同 时 在 支付 页 时 可 将 当前 栈 
位 置 存 储 在 sessionStorage 中 ， 在 第 三 方 支付 成 功 回调 地 址 中 判断 当前 栈 
与 之 前 支付 页 栈 的 步 长 ， 调 用 history.back 〈step+1) ; 跳 转 到 结算 页 ， 
这 样 就 能 避免 用 户 点 击 返回 时 出 现 之 前 已 访问 过 的 页 面 。 








10.3.5 “其 他 页 面 





其 他 页 面 在 实现 上 大 同 小 异 ， 在 实现 过 程 中 有 几 个 细节 需要 注意 : 


设计 页 面前 一 定 要 认真 思考 页 面 数据 模 型 ， 好 的 数据 模型 能 大 大 
减少 页 面 工作 量 。 


在 小 程序 中 不 能 像 浏 览 器 一 样 直接 获取 组 件 尺寸 ， 在 商 详 页 或 一 
些 需 要 展示 图 片 的 页 面 中 ， 可 以 让 后 台 返 回 图 片 尺寸 或 调用 小 程序 API 
获取 图 片 尺 寸 ， 泻 染 时 根据 屏 疾 尺寸 进行 等 比 缩放 。 








在 客户 端 中 小 程序 页 面 整体 放置 在 一 个 view 容 露 中， 当前 页 面 如 
果 高 度 不 够 时 背景 色 为 白色 ， 这 个 容器 底 色 是 不 能 通过 设置 json 文 件 中 
window 背 景色 改变 的 ， 所 以 在 编写 页 面 时 ， 可 以 将 当前 页 面 最 小 高 度 
设置 为 屏幕 高 度 ， 这 样 能 让 页 面 完 全 填充 界面 。 











-编写 样式 文件 时 ， 尽 量 使 用 类 选择 器 隔离 当前 样式 ， 避 免 全 局 样 
式 污染 。 


10.4 小结 





本 章 和 案例 基 本 禾 畜 小 程序 前 端 肖 用 技术 ， 可 以 直接 沿用 到 任何 项 目 
中 。 在 项 目 过 程 中 我 们 尝试 了 多 种 解 看 方式 ， 而 解 厢 的 目的 是 为 了 降低 
项 目 风险 ， 便 于 多 人 开发 ， 但 在 编写 多 点 丙 城 案 例 过 程 中 ， 我 们 也 在 反 
思 小 程序 的 本 质 是 什么 ? 像 商城 这 类 平台 类 型 的 产品 是 否 适 合 做 成 小 程 
序 ? 小 程序 是 否 适 合 一 些 轻 量 级 的 应 用 ? 如 果 小 程序 都 是 一 些 轻 量 级 、 
功能 性 的 页 面 ， 那 项 目的 整体 架构 是 否 可 以 适当 简化 ?上 总之， 在 小 程序 
的 道路 上 我 们 还 有 很 多 路 要 走 ， 大 家 一 起 加 油 ! 








